安装 | Next.js - 简体中文

系统要求：

Node.js 18.17 或更高版本
支持 macOS、Windows（包括 WSL）和 Linux 系统

自动安装

推荐使用 create-next-app 创建新的 Next.js 应用，该工具会自动完成所有配置。执行以下命令创建项目：

终端

npx create-next-app@latest

安装过程中会显示以下选项：

终端

请输入项目名称？my-app
是否使用 TypeScript？否 / 是
是否使用 ESLint？否 / 是
是否使用 Tailwind CSS？否 / 是
是否使用 `src/` 目录？否 / 是
是否使用 App Router？（推荐）否 / 是
是否自定义默认导入别名 (@/*)？否 / 是
请输入需要配置的导入别名？@/*

完成选项后，create-next-app 会创建以项目名命名的文件夹并安装所需依赖。

如果你是 Next.js 新手，请参阅项目结构文档了解应用中可能存在的所有文件和目录。

须知：

Next.js 现在默认内置 TypeScript、ESLint 和 Tailwind CSS 配置

可选择在项目根目录使用 src 目录将应用代码与配置文件分离

手动安装

要手动创建 Next.js 应用，请先安装必要依赖包：

终端

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

打开 package.json 文件并添加以下 scripts：

package.json

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

这些脚本对应应用开发的不同阶段：

dev: 运行 next dev 启动开发模式
build: 运行 next build 构建生产环境应用
start: 运行 next start 启动生产服务器
lint: 运行 next lint 配置内置 ESLint

创建目录

Next.js 使用文件系统路由，意味着应用路由由文件结构决定。

`app` 目录

对于新项目，推荐使用 App Router。该路由支持 React 最新特性，是根据社区反馈对 Pages Router 的演进。

创建 app/ 文件夹后，添加 layout.tsx 和 page.tsx 文件。这些文件会在用户访问应用根路径 (/) 时渲染。

在 app/layout.tsx 中创建包含必需 <html> 和 <body> 标签的根布局：

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

最后创建包含初始内容的首页 app/page.tsx：

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

须知：如果忘记创建 layout.tsx，运行 next dev 启动开发服务器时 Next.js 会自动生成该文件。

了解更多关于使用 App Router 的内容。

`pages` 目录（可选）

如果更倾向于使用 Pages Router 而非 App Router，可以在项目根目录创建 pages/ 文件夹。

然后在 pages 目录中添加 index.tsx 文件作为首页 (/)：

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

接着在 pages/ 中添加 _app.tsx 文件定义全局布局。了解更多关于自定义 App 文件的内容。

import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

最后在 pages/ 中添加 _document.tsx 文件控制服务端初始响应。了解更多关于自定义 Document 文件的内容。

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

了解更多关于使用 Pages Router 的内容。

须知：虽然可以在同一项目中同时使用两种路由，但 app 中的路由优先级高于 pages。建议在新项目中仅使用一种路由以避免混淆。

`public` 文件夹（可选）

创建 public 文件夹存放静态资源（如图片、字体等）。public 目录中的文件可以通过根 URL (/) 在代码中引用。

运行开发服务器

执行 npm run dev 启动开发服务器
访问 http://localhost:3000 查看应用
修改 app/page.tsx（或 pages/index.tsx）文件并保存后，可在浏览器中实时查看更新效果

安装

自动安装

手动安装

创建目录

app 目录

pages 目录（可选）

public 文件夹（可选）

运行开发服务器

On this page

`app` 目录

`pages` 目录（可选）

`public` 文件夹（可选）