Create a new Next.js application

Before you begin, make sure your development environment meets the following requirements:
Next.js supports modern browsers with zero configuration.
Learn more about browser support, including how to configure polyfills and target specific browsers.
The quickest way to create a new Next.js app is using create-next-app, which sets up everything automatically for you. To create a project, run:
On installation, you'll see the following prompts:
If you choose to customize settings, you'll see the following prompts:
After the prompts, create-next-app will create a folder with your project name and install the required dependencies.
To manually create a new Next.js app, install the required packages:
Then, add the following scripts to your package.json file:
These scripts refer to the different stages of developing an application:
Turbopack is now the default bundler. To use Webpack run next dev --webpack or next build --webpack. See the Turbopack docs for configuration details.
Next.js uses file-system routing, which means the routes in your application are determined by how you structure your files.
Create a pages directory at the root of your project. Then, add an index.tsx file inside your pages folder. This will be your home page (/):
Next, add an _app.tsx file inside pages/ to define the global layout. Learn more about the custom App file.
Finally, add a _document.tsx file inside pages/ to control the initial response from the server. Learn more about the custom Document file.
Create a public folder at the root of your project to store static assets such as images, fonts, etc. Files inside public can then be referenced by your code starting from the base URL (/).
You can then reference these assets using the root path (/). For example, public/profile.png can be referenced as /profile.png:
Minimum TypeScript version: v5.1.0
Next.js comes with built-in TypeScript support. To add TypeScript to your project, rename a file to .ts / .tsx and run next dev. Next.js will automatically install the necessary dependencies and add a tsconfig.json file with the recommended config options.
See the TypeScript reference page for more information.
Next.js supports linting with either ESLint or Biome. Choose a linter and run it directly via package.json scripts.
If your project previously used next lint, migrate your scripts to the ESLint CLI with the codemod:
If you use ESLint, create an explicit config (recommended eslint.config.mjs). ESLint supports both the legacy .eslintrc.* and the newer eslint.config.mjs formats. See the ESLint API reference for a recommended setup.
Starting with Next.js 16, next build no longer runs the linter automatically. Instead, you can run your linter through NPM scripts.
See the ESLint Plugin page for more information.
Next.js has in-built support for the "paths" and "baseUrl" options of tsconfig.json and jsconfig.json files.
These options allow you to alias project directories to absolute paths, making it easier and cleaner to import modules. For example:
To configure absolute imports, add the baseUrl configuration option to your tsconfig.json or jsconfig.json file. For example:
In addition to configuring the baseUrl path, you can use the "paths" option to "alias" module paths.
For example, the following configuration maps @/components/* to components/*:
Each of the "paths" are relative to the baseUrl location.
Keep your Next.js version up to date. Each release ships security patches, bug fixes, and performance optimizations alongside new features, and staying current keeps every individual upgrade small. Run the upgrade command:
Upgrading also updates the documentation bundled inside the next package at node_modules/next/dist/docs/. New features arrive with their docs, and existing pages pick up new guidance and pitfalls discovered along the way. AI coding agents in your project then work from the version you have installed rather than their training data.
To have a coding agent perform and verify the upgrade, run npx next@canary upgrade --agent=latest. See Upgrade with a coding agent for other policies.
See Upgrading for version guides and manual upgrade steps, or the preview docs to explore features before they ship in a stable version.
Last updated November 6, 2024
Subscribe to our newsletter
Stay updated on new releases and features, guides, and case studies.