Guide · Open source
How to use Next.js: create an app, run it and deploy
Updated · written with AI from the project's own documentation and checked against our catalogue data
Next.js is an open-source framework built on top of React, the JavaScript library for user interfaces. It adds page routing, server rendering and static site generation so a React project can become a complete website or web app. This guide explains what you need before you start, how to create an app and what the main parts do, so you can decide whether Next.js fits your project.
Next.jsvercel/next.js · ★ 143k · MIT Install options & downloads Quick start
- 1Check prerequisites. Confirm Node.js is installed on your machine, since Next.js is installed with a package manager.
- 2Create the app. Run npx create-next-app@latest in the folder where you want the project.
- 3Open the project. Move into the project folder the command created and review its structure.
- 4Learn the routing model. Look at how pages map to routes so you know where new pages belong.
- 5Pick a rendering approach. Decide which pages need server rendering and which can use static site generation.
- 6Build and extend. Add components and pages, using the included build tooling as your project grows.
What you need before you start with Next.js
Next.js is aimed at developers who already know React. The framework assumes basic JavaScript and React knowledge, so a complete beginner with no experience in those will find the concepts hard to follow.
The main prerequisite listed for installing Next.js is Node.js, since the project is installed with a package manager.
- Working knowledge of JavaScript
- Familiarity with React components
- Node.js installed on your machine
Create a new Next.js app
The quickest way to start is to create a new app with the standard setup command from the project. Run it in the terminal from the folder where you want the project to live.
Once the command finishes, the new project includes page routing and build tooling already set up, so you do not have to assemble these pieces by hand.
npx create-next-app@latestUnderstand what Next.js adds to React
React handles how the user interface is built. Next.js adds the parts a full site usually needs around it: routing between pages, server rendering and static site generation.
Server rendering and static generation are both ways of producing HTML for a page. Teams that need these behaviours get them from the framework instead of building their own.
- Page routing between views of your site
- Server rendering for pages that need it
- Static site generation for pages that can be built ahead of time
Choose when Next.js is the right tool
Next.js suits teams building sites that need server rendering or static generation, and projects that want routing and build tooling included. It is a good match when you want a full framework rather than a set of separate libraries.
For a simple static page, a plain HTML file or a lighter static generator may be enough. Next.js is also tied to React, so teams that want a framework-agnostic setup should look elsewhere.
- Good fit: React developers who want a full framework
- Good fit: sites needing server rendering or static generation
- Poor fit: simple static pages
- Poor fit: framework-agnostic teams
Compare Next.js with similar projects
Several projects solve a similar problem. The ones commonly compared with Next.js are Remix, Gatsby, Nuxt and SvelteKit. Each is built around a different UI library or approach, so the choice usually depends on which library your team already uses.
Remix and Gatsby are both React-based, so they are the closest alternatives if you stay with React. Nuxt and SvelteKit use Vue and Svelte respectively.
- Remix (React)
- Gatsby (React)
- Nuxt (Vue)
- SvelteKit (Svelte)
What people use it for
- Building a marketing site that needs fast static pages
- Creating a web app with multiple routed views in React
- Serving pages with server rendering for content that changes often
- Shipping a React project with less custom setup
Frequently asked questions
Is Next.js free to use?
Yes. Next.js is open source under the MIT licence, which allows you to use, modify and distribute it. Check the licence file in the repository for the full terms.
What do I need to install Next.js?
Next.js requires Node.js. You install it through a package manager and create a new app with npx create-next-app@latest. You also need basic JavaScript and React knowledge.
Can a beginner learn Next.js without knowing React?
Not easily. Next.js assumes you already understand JavaScript and React. Learn those basics first, then use Next.js to build a full site around them.
What is the difference between Next.js and React?
React is a library for building user interfaces. Next.js is a framework built on top of React that adds routing, server rendering and static site generation.
Is Next.js a good alternative to a plain static site generator?
It can be more than you need. For a simple static page, a plain HTML file or a lighter static generator may be enough. Next.js is most useful when you need routing and rendering features as well.
How does Next.js compare with Remix or Gatsby?
All four are React-based options for building sites and apps, with Remix and Gatsby being the closest alternatives. Nuxt and SvelteKit use Vue and Svelte instead, so they fit teams using those libraries.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Next.js is a good choice for developers who already know React and want routing, server rendering and static generation included in one framework. Complete beginners, simple static sites and teams that want to avoid React should pick a lighter tool or a different framework.
Install options & downloads