System Requirements:

  • Node.js 16.14 or later.
  • macOS, Windows (including WSL), and Linux are supported.


  • Node.js 16.14以上
  • 支持macOs, Windows(包含WSL(linux版的windows子系统))以及Linux

Automatic Installation


We recommend starting a new Next.js app using create-next-app, which sets up everything automatically for you. To create a project, run:

我们建议使用create-next-app启动一个新的 Next.js 应用程序,它会自动为你设置好一切。要创建项目,请运行:

npx create-next-app@latest

On installation, you’ll see the following prompts:


What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

在提示之后, create-next-app 会创建一个以你项目名称命名的文件夹并且安装需要的依赖。

Good to know:

  • Next.js now ships with TypeScript, ESLint, and Tailwind CSS configuration by default.
  • You can optionally use a src directory in the root of your project to separate your application’s code from configuration files.


  • Next.js现在默认安装TypeScript、ESLint和Tailwind CSS配置。
  • 你可以选择在项目根目录中使用src目录来将应用程序的代码与配置文件分开。

ships: 船只,默认携带或默认集成, 类比到产品交付的过程,表示这些功能在 Next.js 中已经预先包含,用户可以直接使用。

optionally: 可选择

separate: 分离

Manual Installation


To manually create a new Next.js app, install the required packages:


npm install next@latest react@latest react-dom@latest

Open your package.json file and add the following scripts:


  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"

These scripts refer to the different stages of developing an application:


  • dev: runs next dev to start Next.js in development mode.
  • build: runs next build to build the application for production usage.
  • start: runs next start to start a Next.js production server.
  • lint: runs next lint to set up Next.js’ built-in ESLint configuration.

Creating directories


Next.js uses file-system routing, which means the routes in your application are determined by how you structure your files.


The app directory

For new applications, we recommend using the App Router. This router allows you to use React’s latest features and is an evolution of the Pages Router based on community feedback.

对于新应用程序,我们建议使用App Router。这个路由器允许您使用React的最新功能,是基于社区反馈演变而来的Pages Router的升级版。

evolution: 进化, 演变

Create an app/ folder, then add a layout.tsx and page.tsx file. These will be rendered when the user visits the root of your application (/).


Create a root layout inside app/layout.tsx with the required <html> and <body> tags:


export default function RootLayout({
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">

Finally, create a home page app/page.tsx with some initial content:


export default function Page() {
  return <h1>Hello, Next.js!</h1>

Good to know: If you forget to create layout.tsx, Next.js will automatically create this file when running the development server with next dev.

值得一提的是:如果你忘记了创建layout.tsx文件,Next.js会在使用next dev运行开发服务时自动的创建它。

Learn more about using the App Router.


The pages directory (optional)

If you prefer to use the Pages Router instead of the App Router, you can create a pages/ directory at the root of your project.

如果你喜欢使用 Pages Router 而非 App Router,你可以在项目的根目录下创建一个 pages/ 目录

Then, add an index.tsx file inside your pages folder. This will be your home page (/):

然后,在你的 pages 文件夹中添加一个 index.tsx 文件。这将成为你的主页 (/)


export default function Page() {
  return <h1>Hello, Next.js!</h1>

Next, add an _app.tsx file inside pages/ to define the global layout. Learn more about the custom App file.

接下来,接下来,在 pages/ 目录下添加一个 _app.tsx 文件来定义全局布局。了解更多关于custom App file.


import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />

Finally, add a _document.tsx file inside pages/ to control the initial response from the server. Learn more about the custom Document file.

最后,在 pages/ 目录下添加 _document.tsx 文件,以控制服务器的初始响应。了解更多有关自定义文档文件的信息。


import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
  return (
      <Head />
        <Main />
        <NextScript />

Learn more about using the Pages Router.

Good to know: Although you can use both routers in the same project, routes in app will be prioritized over pages. We recommend using only one router in your new project to avoid confusion.



The public folder (optional)

Create a public folder to store static assets such as images, fonts, etc. Files inside public directory can then be referenced by your code starting from the base URL (/).

创建一个公共文件夹来存储静态资源,如图片、字体等。在公共文件夹中的文件可以在代码中通过从基本URL (/) 开始进行引用。

assets: 资产

Run the Development Server


  1. Run npm run dev to start the development server.

  2. Visit http://localhost:3000 to view your application.

  3. Edit app/layout.tsx (or pages/index.tsx) file and save it to see the updated result in your browser.

  4. 运行 npm run dev 来启动开发服务器。

  5. 访问 http://localhost:3000 来查看你的应用程序。

  6. 编辑 app/layout.tsx(或 pages/index.tsx)文件并保存, 在浏览器中查看更新的结果