Next.js 15 Full-Stack Foundations

What You Will Learn By the end of this 5-day Next.js 15 course, you will be able to: Understand the App Router architecture and file-system routing Build pages with Server Components and Client Components Create dynamic routes, route groups, and advanced routing patterns Fetch data using Server Components with async/await Implement caching and revalidation strategies Use Server Actions for form mutations Build API Routes (Route Handlers) Implement authentication with middleware Optimize performance with streaming, Suspense, and ISR Deploy production-ready applications Prerequisites Basic knowledge of React (components, hooks, state) Basic JavaScript/TypeScript Node.js 18+ installed VS Code or similar editor Course Materials Computer with Node.js 18+ VS Code with TypeScript and Tailwind extensions Git installed GitHub account (for deployment) Vercel account (optional but recommended) Course Setup Creating the Project # Create a new Next.js 15 project with TypeScript and Tailwind npx create-next-app@latest nextjs-course-app --typescript --tailwind --eslint --app -- # Navigate to project cd nextjs-course-app # Install additional dependencies npm install @types/node @types/react @types/react-dom -D # Start development server npm run dev Project Structure (App Router): nextjs-course-app/ ├── src/ │ └── app/ │ ├── globals.css │ ├── layout.tsx # Root layout (Server Component) │ ├── page.tsx # Home page (Server Component) │ ├── (marketing)/ # Route group - no URL impact │ │ ├── about/ │ │ │ └── page.tsx # /about │ │ └── contact/ │ │ └── page.tsx # /contact │ ├── (dashboard)/ # Route group - different layout │ │ ├── layout.tsx # Dashboard layout with sidebar │ │ └── dashboard/ │ │ └── page.tsx # /dashboard │ ├── blog/ │ │ ├── page.tsx # /blog │ │ └── [slug]/ # Dynamic route │ │ └── page.tsx # /blog/hello-world │ ├── api/ # API Routes │ │ └── posts/ │ │ └── route.ts # /api/posts │ ├── loading.tsx # Loading UI (Suspense fallback) │ ├── error.tsx # Error UI │ └── not-found.tsx # 404 UI ├── public/ ├── next.config.ts ├── tailwind.config.ts ├── tsconfig.json └── package.json