Next.js

What's inside

Lessons go from the basics to advanced topics. Read them in order, or jump to what you need.

1. 01

   Chapter 1

   Getting Started

   • 1Next.js IntroductionNext.js is a React framework that adds file-based routing, server rendering and API endpoints, so you can build a complete full-stack web app in a single project.
   • 2Create a Next.js AppCreate your first project with npx create-next-app@latest, understand the setup questions, then start the development server with npm run dev.
   • 3Project StructureExplore the folders and files the tool created: app/ for routes, public/ for static files, and the two essential files layout.tsx and page.tsx.
2. 02

   Chapter 2

   Routing

   • 4File-based RoutingIn the App Router, every folder inside app/ becomes part of the URL, and a page.tsx file turns that route into a page people can visit.
   • 5LayoutsA layout is shared UI that wraps several pages, like a header or a sidebar, and stays in place, keeping its state, as users navigate.
   • 6Linking and NavigatingMove between pages with the Link component without reloading the site, navigate from code with the useRouter hook, and redirect users from the server with redirect.
   • 7Dynamic RoutesCreate one page that serves unlimited URLs with dynamic segments like [slug], read their values from params, and pre-build the pages with generateStaticParams.
   • 8Route Groups and Special FilesOrganize your project with route groups (folder) and private folders _folder, and use the special files loading.tsx, error.tsx and not-found.tsx for loading states, errors and missing pages.
3. 03

   Chapter 3

   Rendering & Data

   • 9Server and Client ComponentsEvery component in the App Router is a Server Component by default. Learn when to add the 'use client' directive for browser interactivity, and how to combine both kinds wisely.
   • 10Data FetchingFetch data directly in Server Components with async/await and fetch, control caching and revalidation, and load several sources in parallel.
   • 11Rendering StrategiesUnderstand when Next.js renders your page: once at build time (static), on every request (dynamic), or statically with periodic updates (ISR), and how to choose for each page.
   • 12Route Handlers (API Endpoints)Build API endpoints inside your Next.js project with a route.ts file and GET/POST functions, read the request body and parameters, and return JSON with the right status codes.
   • 13Server ActionsRun server code directly from forms and buttons with the 'use server' directive, with no API to write, then refresh the page and show pending states and errors.
   • 14Loading UI and StreamingShow an instant loading UI with loading.tsx, and split the page into parts that stream in with <Suspense>, so users never wait for the slowest part to see the page.
4. 04

   Chapter 4

   Features

   • 15Styling: CSS and TailwindStyle your app with the three most common approaches in Next.js: global CSS files, locally scoped CSS Modules, and Tailwind CSS utility classes.
   • 16Images and FontsUse the Image component from next/image to optimize images automatically, and load Google or local fonts with next/font without slowing the page down or making text jump.
   • 17Metadata and SEOSet each page's title, description and social preview with the metadata object and generateMetadata, and generate sitemap.xml and robots.txt in code.
   • 18MiddlewareRun code before a request reaches your page with a middleware.ts file: redirect signed-out visitors, rewrite URLs, or add response headers.
   • 19Environment VariablesKeep secrets and settings out of your code in .env files, and understand the difference between server-only variables and NEXT_PUBLIC_ variables the browser can see.
   • 20Authentication OverviewUnderstand authentication in Next.js: sessions and cookies, where to check identity and permissions, and how the Auth.js (NextAuth) library helps you add sign-in quickly.
   • 21Building and DeploymentPrepare your app for production with next build, run it with next start, then deploy it to Vercel in a few clicks or to your own server.
   • 22Project: A Mini BlogPut everything together in a real project: a blog with a home page, a post list, a pre-generated page per post, an interactive like button, an API endpoint and SEO metadata.