# The Next.js Guide > Next.js is the most popular React framework. Learn routing, data fetching, API routes and deployment with this curated guide to the best tutorials. Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2018-03-23 | Updated: 2026-07-14 | Topics: [Next.js](https://flaviocopes.com/tags/next/) | Canonical: https://flaviocopes.com/nextjs/ Next.js is a React framework. It gives you everything React doesn't: routing, server-side rendering, API endpoints, image optimization, and a production build system. It's the most popular way to build React applications today. If you know React and want to ship real projects, Next.js is the natural next step. This page is your starting point for Next.js on this site. I organized the best posts into a learning path, then grouped the rest by theme so you can find what you need. ## Where to start Follow these in order if you're new to Next.js: 1. [How to install Next.js](https://flaviocopes.com/how-to-install-nextjs/) gets your first project running 2. [Linking two pages in Next.js using Link](https://flaviocopes.com/nextjs-link-two-pages/) covers client-side navigation 3. [Dynamic content in Next.js with the router](https://flaviocopes.com/nextjs-dynamic-content/) shows how to build pages from dynamic data 4. [How to use the Next.js Router](https://flaviocopes.com/nextjs-router/) goes deeper into routing 5. [How to use Next.js API Routes](https://flaviocopes.com/nextjs-api-routes/) lets you build backend endpoints inside the same project 6. [View source to confirm SSR is working in Next.js](https://flaviocopes.com/nextjs-ssr/) helps you understand what server-side rendering actually does If you're wondering how Next.js compares to the alternatives, read [Next.js vs Gatsby vs create-react-app](https://flaviocopes.com/next-vs-gatsby-vs-cra/). ## Routing and navigation The router is the heart of Next.js. These posts cover the patterns you'll use constantly: - [How to programmatically change a route in Next.js](https://flaviocopes.com/nextjs-programmatically-change-route/) - [Using the router to detect the active link in Next.js](https://flaviocopes.com/nextjs-active-link/) - [Prefetching content in Next.js](https://flaviocopes.com/nextjs-prefetching/) - [How to force a page refresh in Next.js](https://flaviocopes.com/nextjs-force-page-refresh/) - [Next.js, how to open a link in a new window](https://flaviocopes.com/nextjs-open-link-new-window/) ## Data and rendering How to feed data to your pages, and how to control where code runs: - [Feed data to a Next.js component using getInitialProps](https://flaviocopes.com/nextjs-getinitialprops/) - [Run code only on server or client in Next.js](https://flaviocopes.com/nextjs-server-client-code/) - [How to get cookies server-side in a Next.js app](https://flaviocopes.com/nextjs-cookies/) - [Cache data globally in Next.js at build time](https://flaviocopes.com/nextjs-cache-data-globally/) - [How to parse Markdown in Next.js](https://flaviocopes.com/nextjs-parse-markdown/) - [How to fix error serializing Date object JSON in Next.js](https://flaviocopes.com/nextjs-serialize-date-json/) ## Building real features Practical recipes for things every app needs: - [Next.js Email Authentication using NextAuth](https://flaviocopes.com/nextjs-email-authentication/) - [How to upload files in a Next.js form](https://flaviocopes.com/nextjs-upload-files/) - [How to add ReCaptcha to a Next.js form](https://flaviocopes.com/nextjs-recaptcha/) - [How to add Google Analytics 4 to Next.js](https://flaviocopes.com/nextjs-google-analytics/) - [Styling Next.js components using CSS](https://flaviocopes.com/nextjs-styling-components-css/) - [Adding a wrapper component to your Next.js app](https://flaviocopes.com/nextjs-wrapper-component/) - [Next.js: populate the head tag with custom tags](https://flaviocopes.com/nextjs-customize-head/) - [How I set up a Next.js project structure](https://flaviocopes.com/nextjs-project-structure/) ## Fixing common errors Next.js errors can be cryptic. These posts cover the ones I hit most often: - [Fix the 'module not found' error in Next.js](https://flaviocopes.com/nextjs-fix-module-not-found/) - [Fix Next.js component state not refreshing on navigation](https://flaviocopes.com/nextjs-refresh-state-navigation/) - [Blank page after router.push() in Next.js?](https://flaviocopes.com/nextjs-blank-page-router-push/) - [Fix 'PrismaClient is unable to be run in the browser' in Next.js](https://flaviocopes.com/nextjs-fix-already-10-prisma-clients/) - [Fix Tailwind 'unable to resolve dependency tree' in Next.js](https://flaviocopes.com/nextjs-tailwind-resolve-dependency-tree/) ## Going to production When it's time to ship: - [Deploying a Next.js app in production](https://flaviocopes.com/nextjs-deploy-to-production/) - [How to analyze the Next.js app bundles](https://flaviocopes.com/nextjs-analyze-app-bundle/) - [Lazy loading modules in Next.js](https://flaviocopes.com/nextjs-lazy-load-modules/) - [Revalidation and ISR gotcha on Vercel](https://flaviocopes.com/revalidation-and-isr-gotcha-on-vercel/) ## Go deeper For a structured walkthrough of the framework, download the free [Next.js Pages Router Handbook](https://flaviocopes.com/ebooks/nextjs-pages-router-handbook/). Next.js builds on React, so solid React fundamentals pay off double here. That's what the [React Masterclass](https://flaviocopes.com/courses/react) gives you. Everything I wrote about Next.js is in [the next tag](https://flaviocopes.com/tags/next/).