Next.js: Build Scalable React Apps with Page & App Routers

Learn why rendering matters and how it impacts performance.

Discover how Next.js supports traditional React CSR.

Learn how Next.js renders pages on the server for each request.

Explore how to generate static HTML at build time.

Dive into how Next.js builds pages on demand and caches them.

Dive into how Next.js builds pages on demand and caches them.

Learn what the Page Router is and when to use it.

Set up a new Next.js project using the Page Router.

Create your first pages and navigate between them.

Learn how to create nested routes for better structure.

Reinforce routing knowledge through hands-on practice.

NOTE: This is a zipped package of the codebase.

To use it, please run the command npm install to install all dependencies required to start the application.

Learn to use dynamic route parameters using [slug].

Deep dive into advanced dynamic routes like catch-all paths.

Customize the error page users see when they visit unknown routes.

Use the Link component to handle navigation in-app.

Discover features like prefetching and scroll behavior.

Understand what happens to routes during build time.

Centralize configuration and global components.

Practice modifying and extending your _app file.

Structure your pages using custom layouts.

Customize the HTML document structure and meta tags.

Brief intro to the rendering capabilities of Page Router.

Understand how CSR is implemented within the Page Router.

See how to fetch and serve dynamic data server-side.

Begin using static site generation with Page Router.

Build out complex static pages and optimize builds.

Finish the SSG workflow with practical examples.

Combine SSG and SSR to update static pages incrementally.

Understand the benefits and differences of App Router.

Set up a new project using the App Router.

Learn the folder-based file structure of App Router.

Define layouts that wrap around different routes.

Set metadata directly in your page components.

Generate metadata dynamically for SEO and sharing.

Add custom favicons and icons to your app.

Compose and reuse layouts using nested folders.

Learn route grouping and apply your knowledge in homework.

Review the solution to the homework with explanation.

Learn how App Router handles rendering.

Generate static content using App Router’s file-based API.

Observe static build behavior in action.

Apply your knowledge in a short task.

Migrate an SSG posts app into the new router system.

Explore how to add incremental static updates in App Router.

Implement dynamic SSR using App Router.

See how to set up client-side rendering in this context.

Use the next/image component for responsive image loading.

Load custom and system fonts efficiently using next/font.

Build your first API endpoint using Pages Router.

Handle complex logic and advanced API structures.

Implement APIs using App Router’s new methods.

Create efficient handlers and middleware with App Router.

Deploy your project to Vercel with a few simple steps.