Contents
Next.js
A React framework for sites and apps: file-based routing, server components and data.
1.Getting started
- What is Next.jsWhat Next.js adds to React, when you need it and which version this course covers.
- Creating a projectHow to create a Next.js project with create-next-app, run it, and what lives in its folders.
- Pages and file-based routingHow folders inside app become site addresses and what the page.tsx file is.
- Layouts and the root layoutHow to move a shared header and footer into layout.tsx and give a section its own layout.
- Navigation: Link and useRouterHow to link pages with the Link component and navigate from code with useRouter.
2.Routing
- Dynamic routesHow to serve many addresses with one page through a [slug] folder and read the params prop.
- Nested routesHow to build addresses from several segments, read the params of parent folders and combine regular and dynamic folders.
- Route groups and private foldersHow to group pages with folders in parentheses, give a group its own layout and hide helper folders.
- Special files and the 404 pageWhich other files besides page and layout Next.js understands, and how to show your own 404 page with not-found.tsx and notFound().
3.Components and data
- Server and client componentsWhere a component runs in the App Router, what the use client directive does and how to combine both kinds of components.
- Fetching data in server componentsHow to get data right in a server component with await: from your own functions and from an external API with fetch.
- Caching and revalidationWhat Next.js 16 caches by default, how to enable caching for fetch and how to refresh data with revalidate, revalidatePath, revalidateTag and updateTag.
- Static and dynamic renderingWhen Next.js prepares a page at build time and when on every request, and how to prebuild post pages with generateStaticParams.
- Loading UI and streamingHow to show a placeholder while a page loads data: the loading.tsx file and the Suspense component.
- Cache Components and use cacheThe new caching model of Next.js 16: the cacheComponents setting, the use cache directive, and the cacheLife and cacheTag functions.
4.Forms, API and database
- Server actions for formsHow to handle a form submission with a server function marked use server, without a separate API.
- Form validation and errorsHow to check data in a server action and show errors under the fields with the useActionState hook.
- Route handlers: your own APIHow to build an API in Next.js with a route.ts file: GET and POST methods, address parameters and JSON responses.
- Connecting a databaseHow to store posts and comments in SQLite with Drizzle ORM: the schema, creating tables and queries.
5.Styling and SEO
- Metadata and SEOHow to set the tab title, the description and social media data with metadata and generateMetadata.
- Images with next/imageHow to show images with the Image component: sizes, images from public, external addresses and filling a box.
- Fonts with next/fontHow to load a Google Fonts font or your own font file with next/font without requests to third-party servers.
- Global CSS and CSS modulesWhere to write the site-wide styles and how to give a component its own classes that do not clash with others.
- Tailwind CSSHow to style components with ready-made Tailwind CSS classes in a Next.js project and how to set your own colours.
6.Production app
- Environment variablesHow to keep settings and secrets in .env files, read them with process.env and what the NEXT_PUBLIC_ prefix does.
- Proxy: code before the requestHow to run code before a page renders: the proxy.ts file, redirects, headers and the matcher setting.
- Authentication overviewHow logging in works in Next.js: a session cookie, the cookies() function, permission checks in a server action and when to use Auth.js.
- Several languages: an overviewHow to build a multilingual site with the App Router: a [lang] segment, dictionaries, language detection in proxy.ts and the next-intl library.
- Error handlingHow to show a clear page on failure: the error.tsx and global-error.tsx files, a retry button and expected errors in actions.
- Testing basicsHow to check a Next.js app automatically: unit tests of components in Vitest and end-to-end tests of pages in Playwright.
- Building and deployingHow to build the project with next build, run it on your own server, publish it on Vercel or export it as a static site.