Web Development · WDC-116

AI Next.js Fullstack Workshop

6 hours 1 days

Last updated 25 Sep 2026

AI Next.js Fullstack Workshop พัฒนาเว็บแอปยุคใหม่ร่วมกับ AI Agent

AI Next.js Fullstack Workshop is a 6-hour training course by IT Genius Institute. Most developers already use AI to help write code, but they use it one question at a time and paste the results in. That captures only part of the value and…

Training schedule

No public rounds are open right now — register your interest and we will contact you when the next round opens, or request an in-house session for your team.

Corporate training quote

Most developers already use AI to help write code, but they use it one question at a time and paste the results in. That captures only part of the value and usually produces code that does not fit the existing structure. Working with AI professionally requires an explicit workflow: design first, write a spec that keeps the AI inside a defined frame, then delegate work in pieces and review what comes back. This full-day workshop is for people who

already have web fundamentals and want to assemble that complete modern workflow. It covers AI-assisted UI design, connecting the design into the editor through MCP, spec-driven development with design.md and spec.md, planning and breaking down work with AI, building the app with Next.js and TypeScript alongside Prisma and Supabase, adding authentication, debugging and code review with AI, delegating iterative work to an AI agent, and deploying to production with the right configuration. (1 day, 6 hours, Intermediate level.)

Objectives

Assemble a complete AI-assisted development workflow from design to deployment
Use AI to design UI and evaluate the output before building on it
Bring the design into the editor with MCP to generate starting code quickly
Write spec files that keep AI output aligned with the design
Plan the project and break work into pieces with AI so development keeps moving
Build a web app with Next.js and TypeScript alongside Prisma and Supabase
Implement authentication and user permissions in the application
Use AI systematically for debugging and code review
Deploy to production with environment variables and secrets handled safely

Who this course is for

Web developers who want to make their AI-assisted work systematic
Frontend developers moving into backend and database work
Anyone with HTML, CSS and JavaScript fundamentals who wants to start with Next.js
Freelancers and project owners who need to ship faster without losing quality
Development teams standardizing how their people work with AI

Prerequisites

HTML, CSS and JavaScript fundamentals sufficient to read and edit code
Experience building a web page or small web app (Next.js experience not required)
Basic command line and Git skills
Bring your own laptop (Windows or macOS) with permission to install software

Curriculum

Course Details

A 1-day course, 6 hours (10:00-17:00), run as a hands-on workshop throughout. Intermediate level; learners should already have HTML, CSS and JavaScript fundamentals and must bring their own laptop (Windows or macOS) with permission to install software. Learners take home the source code, a spec template set (design.md and spec.md), a prompt workflow, and their own application already deployed to production. The content focuses on workflow and principles, so it transfers to other AI tools as the technology changes.

Session 1: AI UI Design, MCP and Spec (10:00-12:00)

Section 1: AI-Assisted UI Design

Using AI to draft screens and produce design alternatives quickly
Evaluating AI-generated design: consistency, real usability and buildability
Establishing a color system and component set so every screen stays coherent
Lab: design your project screens with AI and pick the direction to build

Section 2: MCP, Bringing Design into the Editor

What MCP is and how it lets an AI agent reach external tools and data
Passing the design into the editor to generate starting code instead of from scratch
Reviewing and adapting the generated code to fit the real project structure
Lab: connect your design into the project and get your first screen scaffold

Section 3: Spec-Driven Development

Why one-question-at-a-time prompting produces code that does not fit the codebase
Writing design.md to describe the look and behaviour of the system for the AI to read first
Writing spec.md to define scope, requirements and acceptance criteria per task
Lab: write design.md and spec.md for your project and have the AI follow them

Session 2: Planning and Next.js Fullstack (13:00-15:15)

Section 4: Project and Task Planning with AI

Having AI plan the project and order the work from the spec you wrote
Breaking large work into pieces the AI can finish in one pass
Sequencing tasks so development keeps moving without getting stuck
Tracking progress and adjusting the plan when requirements change

Section 5: Next.js and TypeScript

Next.js project structure and the split between server and browser work
Routing, building APIs and fetching data for display
Using TypeScript to reduce errors and give the AI a clearer view of the code
Lab: scaffold a Next.js project with your first screens and API routes

Section 6: Databases with Prisma and Supabase

Designing the data model and the relationships between tables
Using Prisma to define the schema and manage structural changes
Connecting Supabase and reading and writing data from the app safely
Lab: build your project database and wire it into the screens you made

Section 7: Authentication and User Permissions

Building signup and login with Better Auth
Managing sessions and protecting pages that require login
Defining user roles and checking permissions on the server side
Lab: add login and restrict access in your own application

Session 3: AI Debugging, Agents and Production Deploy (15:15-17:00)

Section 8: Debugging and Code Review with AI

Giving the AI enough context that it can actually find the cause
Having AI review code and flag security and performance risks
The limits of AI review and where a human still has to decide
Delegating work to an AI agent in iterations and reviewing each round

Section 9: Deploying to Production and Wrap-up

Preparing the project for deployment and the checks to run first
Setting environment variables and storing secrets safely
Connecting the production database and updating the app after deployment
Workshop: deploy your app to production and plan how to apply this workflow

Frequently asked questions

Who is AI Next.js Fullstack Workshop for, and what background is needed?

Built for Web developers who want to make their AI-assisted work systematic · Frontend developers moving into backend and database work · Anyone with HTML, CSS and JavaScript fundamentals who wants to start with Next.js Background you should have: HTML, CSS and JavaScript fundamentals sufficient to read and edit code · Experience building a web page or small web app (Next.js experience not required) Not sure the fit is right? Talk to our team on LINE @itgenius or call 02-570-8449.

How much does AI Next.js Fullstack Workshop cost and how long does it run?

THB 5,900 (currently THB 5,310 on promotion). The course runs 6 hours. The fee covers course materials, lunch and refreshments throughout. Pay by bank transfer to the company account, confirm it on our payment page, and we can issue the receipt or tax invoice in your company's name.

Do I get a certificate?

Yes. Everyone who completes the course receives a Certificate of Completion from IT Genius Institute. Each certificate carries its own number, and anyone holding that number can verify it online on our certificate page, so you can add it to your portfolio or pass it to HR as evidence of training.

Where does the training take place, and is there an online option?

You can attend onsite at IT Genius Institute or arrange to join online, and we also run it as a private in-house session for your team. Ask about dates and venues on LINE @itgenius or call 02-570-8449.

What if I fall behind or miss a session — can I retake it?

Yes. You may retake the same course free of charge in a later round, under the institute's conditions. Tell our team which course and round you attended, and we will check it and offer you the rounds that still have seats. Ask us on LINE @itgenius or call 02-570-8449.

How do I enrol, or request a quotation for my company?

Enrol online with the registration form on this page. You can register several attendees at once and enter your tax ID and billing address for the tax invoice. Or request a company quotation straight from the quote button. For anything else call 02-570-8449 or reach us on LINE @itgenius.