Basic Next.js for Beginners is a hands-on course in building web applications with Next.js 16 and the App Router, covering routing, server and client components, UI with Tailwind CSS and shadcn/ui, Server Actions with Prisma ORM and a simple login. It suits React developers, students and freelancers, and you leave able to build an inventory system with login and CRUD.
Next.js is the React framework most widely used today for building full-stack web applications. Next.js 16 makes the App Router the main approach, with Server Components that fetch data directly on the server, Server Actions that receive form data without a separate API, and Turbopack as the default for both development and builds. Developers who already write React can use it to build fast, secure, SEO-friendly websites in a single project.
This course takes you from creating a project with create-next-app to arranging pages and layouts with the App Router, splitting work between Server and Client Components, styling the interface with Tailwind CSS 4 and shadcn/ui, connecting a database with Prisma ORM, building CRUD with Server Actions and validation, and adding a simple login, all through an inventory management workshop that grows throughout the course until it is ready to deploy. (2 days, 6 hours per day, 12 hours in total, Beginner level.)
Course Details
This course is the 2026 edition of Basic Next.js for Beginners, updated for Next.js 16 with the App Router. It runs for 2 days, 6 hours per day (12 hours in total, 09:00-16:00), as lectures alternating with labs around an inventory management workshop that grows throughout the course. Beginner level. Learners build routing and layouts, use Server and Client Components correctly, style the interface with Tailwind CSS 4 and shadcn/ui, connect a database with Prisma ORM, build CRUD with Server Actions, validate data with Zod, add a login with a session cookie and proxy.ts, and deploy to Vercel. They take home the source code for every lab.
Section 1: Lab: Getting Started with Next.js 16
Section 2: Lab: Routing and Layouts with the App Router
Section 3: Server Components and Client Components
Section 4: Lab: UI with Tailwind CSS 4 and shadcn/ui
Section 5: Metadata, Images and Fonts
Section 6: Lab: A Database with Prisma ORM
Section 7: Lab: Server Actions and CRUD
Section 8: Validation and Error Handling
Section 9: Lab: A Simple Login System
Section 10: Workshop: Inventory System and Deployment
No public rounds are open right now. Join the waiting list and we will contact you first when the next round opens, or ask us on LINE. Or call 02-570-8449 or 088-807-9770
In the App Router every component is a Server Component by default: it renders on the server, can fetch data directly with async/await and sends none of its own JavaScript to the browser. A Client Component starts with 'use client' and is needed for state, events such as onClick, or hooks like useState and useEffect. The usual approach is to keep components on the server and move only the interactive parts to the client.
Create folders inside app that match the paths you want and put a page.tsx file in each, so app/products/page.tsx becomes /products. Dynamic routes use a folder name in square brackets, such as app/products/[id]. A layout.tsx file holds shared parts such as the header and sidebar for every page in that folder, and the special files loading.tsx, error.tsx and not-found.tsx handle loading states, errors and missing pages.
A Server Action is an async function that runs on the server. You declare it with 'use server' and pass it to a form's action, with no separate API route needed. It receives the form's FormData; you should validate it with Zod and check the user's permissions every time before saving. Then call revalidatePath so the page shows fresh data, or redirect elsewhere. On the form side, useActionState receives error messages and the pending state while the form submits.
It suits frontend developers who already write React, programmers moving into web development with a modern stack, students working on final-year projects, and freelancers or start-up founders who want to build web applications themselves. You should understand HTML and CSS, be able to write ES6+ JavaScript and know React basics such as components, props and useState.
You will be able to set up a Next.js 16 App Router project, use Server and Client Components correctly, build routing and layouts, create interfaces with Tailwind CSS 4 and shadcn/ui, connect a database with Prisma ORM, build CRUD with Server Actions validated by Zod, add a login and protect pages with proxy.ts, then deploy to Vercel. Participants who complete the training receive a Certificate of Completion with its own number, which can be verified online.
The course uses Next.js 16 with the App Router on Node.js 24 LTS, creating the project with create-next-app plus TypeScript, Tailwind CSS 4 and ESLint. Components come from shadcn/ui, installed through its CLI, Prisma ORM 7 with SQLite provides the database, Zod validates data, bcrypt and jose power the login, and the project is deployed to Vercel with the learner's own free account. All tools are free to use.
Every major browser now supports HTML and CSS features that used to need JavaScript or third-party libraries: forms that validate themselves, dialogs and popovers, styling based on what an element contains with :has(), components that adapt to the space they…
Every website we open today, whatever tool or framework built it, ends up in the browser as HTML and CSS. People who understand these two languages can edit pages, adapt templates and talk to development teams with confidence. Yet many beginners learn from…
PHP and MySQL still power a great many websites, from internal back-office systems and sites built on WordPress to frameworks such as Laravel. Understanding PHP and databases from the ground up is therefore a good way into web development. Yet much of the…
