Day 1 — Introduction & Setup: The Next.js Revolution
Kickstart your 30-day journey into Next.js. Learn why the App Router changes everything and set up your first project.
Day 2 — The App Router: File-System Routing
Master the core of Next.js 14+: File-system routing. Create pages, dynamic segments, and organize your routes.
Day 3 — Pages, Layouts & Templates: Mastering Structure
Understand the hierarchy of a Next.js app: RootLayout, Nested Layouts, Pages, and Templates.
Day 4 — Navigation & Linking: Moving Between Pages
Learn how to navigate in Next.js using the Link component, useRouter hook, and how to handle active link states.
Day 5 — Styling & Fonts: Tailwind, CSS Modules, & Optimization
Style your Next.js app the right way. Learn to configure Tailwind CSS, use CSS Modules, and optimize fonts with next/font.
Day 6 — Optimized Images: The <Image> Component
Stop shipping unoptimized images. Learn how the Next.js Image component automatically resizes, formats, and lazy-loads your assets.
Day 7 — Metadata & SEO: The Static & The Dynamic
Master SEO in Next.js. Define static metadata for branding and dynamic metadata for blog posts and products.
Day 8 — Server vs. Client Components: The Paradigm Shift
The most important concept in modern Next.js. Learn when to use Server Components (default) and when to opt-in to Client Components.
Day 9 — Data Fetching: The Modern Way
Forget useEffect. Learn how to fetch data directly in Server Components using async/await and the native fetch API.
Day 10 — Static Site Generation (SSG): Building for Speed
Learn how to generate static pages at build time with generateStaticParams. The ultimate performance optimization.
Day 11 — Dynamic Rendering (SSR): Real-Time Data
Sometimes Static isn’t enough. Learn how to force Dynamic Rendering for personalized dashboards, analytics, and request-time data.
Day 12 — Streaming & Suspense: Instant UI
Don’t block the whole page while waiting for slow data. Use React Suspense to stream HTML chunks and show loading skeletons instantly.
Day 13 — Error Handling: Breaking Gracefully
Things go wrong. Learn how to use error.tsx and not-found.tsx to handle 404s and crashes without taking down your entire app.
Day 14 — Route Handlers: Your Backend API
You don’t need a separate Express server. Learn how to create API endpoints directly in Next.js using route.ts files.
Day 15 — Server Actions I: Forms without APIs
The API is dead? Long live Server Actions. Learn how to mutate data directly from your components without creating REST endpoints.
Day 16 — Server Actions II: Loading & Error States
Make your Server Actions interactive. Use useFormStatus for pending states and useFormState for handling validation errors.
Day 17 — Revalidating Data: Freshness on Demand
How do you update the UI after a mutation? Master revalidatePath and revalidateTag to purge the Next.js cache.
Day 18 — Cookies & Headers: The HTTP Context
Read and write Cookies and Headers in Server Components. Essential for authentication, obsession tracking, and personalization.
Day 19 — Middleware: The Gatekeeper
Intercept requests before they even hit your app. Use Middleware for authentication, redirects, and rewriting paths.
Day 20 — Redirects: Sending Users Away
Master the art of redirection. From temporary 307s to permanent 301s, learn the redirect() function and next.config.js redirects.
Day 21 — Parallel Routes: Complex Layouts Made Easy
Render multiple pages in the same layout simultaneously. Perfect for advanced dashboards, split-views, and slots.
Day 22 — Authentication: Auth.js (NextAuth) v5
Secure your app. Implement robust authentication using the industry standard Auth.js (NextAuth) v5 Beta.
Day 23 — Database: Setting up Prisma
Connect your Next.js app to a real database. Learn to set up Prisma ORM, define your schema, and run migrations.
Day 24 — CRUD Operations: Full Stack Flow
Combining everything we learned. Build a fully functional Create, Read, Update, Delete application with Server Actions and Prisma.
Day 25 — Caching Deep Dive: Understanding the Layers
Next.js caching is complex. We demystify the Data Cache, Request Memoization, Router Cache, and Full Route Cache.
Day 26 — Internationalization (i18n): Going Global
Translate your Next.js app. Implement routing for multiple locals (en, es, fr) and manage translation dictionaries.
Day 27 — Performance Optimization: Core Web Vitals
Speed matters. Learn how to analyze your bundle, optimize third-party scripts, and improve LCP with the <Script> component.
Day 28 — Testing: Vitest & Playwright
Sleep well at night. Set up Unit Testing with Vitest and End-to-End Testing with Playwright for your Next.js app.
Day 29 — Capstone Project I: Planning & AI Chatbot
Start building the final project: An AI Chatbot. We plan the architecture, set up the project, and integrate the Vercel AI SDK.
Day 30 — Capstone Project II: Polish & Deployment
The Finale! Add Markdown rendering to your chatbot, style it with Tailwind, and deploy your masterpiece to the world on Vercel.