Next.js Pages Router
Build with the Next.js Pages Router - file-based routing, API routes, middleware, and the three ways to render a page.
Challenges
15 of 15 challenges
Your First Next.js App
Get to know the anatomy of a Next.js project and put your first pages on the file-system router.
Nested Routes
Map a whole URL hierarchy onto folders, and learn where index files fit in.
Linking and Navigation
Move between pages without a full reload using next/link, and navigate from code with useRouter.
API Routes
Ship a backend with your frontend - build JSON endpoints inside pages/api.
Static Generation
Do the work once at build time with getStaticProps and serve plain HTML to every visitor.
Custom App and Layouts
Wrap every page with shared chrome using _app.jsx, and let individual pages opt out with per-page layouts.
Dynamic Routes
Serve a thousand URLs from one file with dynamic and catch-all route segments.
Server Side Rendering
Render a page on every request with getServerSideProps, using the query string, headers and cookies.
Incremental Static Regeneration
Keep static pages fresh without rebuilding the site - on a timer, or on demand from an API route.
Head and Metadata
Set the title, description and social preview tags of a page with next/head.
Dynamic API Routes
Build a REST resource: read, update and delete a single record from a bracketed API route.
Fetching Data on the Server
Call a real API from getServerSideProps, trim the payload, and handle the request failing.
Redirects and Not Found
Send visitors somewhere else, return a real 404, and design the pages they land on.
Static Paths
Pre-render a dynamic route for every record with getStaticPaths, and decide what happens to the URLs you did not build.
Middleware
Run code before a request is routed - gate private pages, rewrite URLs and set headers at the edge.