安装

系统要求：

¥System Requirements:

Node.js 18.17 或更高版本。

¥Node.js 18.17 or later.
支持 macOS、Windows（包括 WSL）和 Linux。

¥macOS, Windows (including WSL), and Linux are supported.

自动安装

¥Automatic Installation

我们建议使用 create-next-app 启动一个新的 Next.js 应用，它会自动为你设置所有内容。要创建项目，请运行：

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

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? @/*

出现提示后，create-next-app 将以你的项目名称创建一个文件夹并安装所需的依赖。

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

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

¥If you're new to Next.js, see the project structure docs for an overview of all the possible files and folders in your application.

很高兴知道：

¥Good to know:

Next.js 现在默认附带 TypeScript、ESLint 和 Tailwind CSS 配置。

¥Next.js now ships with TypeScript, ESLint, and Tailwind CSS configuration by default.

你可以选择在项目的根目录中使用 src 目录将应用的代码与配置文件分开。

¥You can optionally use a src directory in the root of your project to separate your application's code from configuration files.

手动安装

¥Manual Installation

要手动创建新的 Next.js 应用，请安装所需的包：

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

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

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

¥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：运行 next dev 以在开发模式下启动 Next.js。

¥dev: runs next dev to start Next.js in development mode.
build：运行 next build 来构建用于生产的应用。

¥build: runs next build to build the application for production usage.
start：运行 next start 来启动 Next.js 生产服务器。

¥start: runs next start to start a Next.js production server.
lint：运行 next lint 来设置 Next.js 的内置 ESLint 配置。

¥lint: runs next lint to set up Next.js' built-in ESLint configuration.

创建目录

¥Creating directories

Next.js 使用文件系统路由，这意味着应用中的路由由你构建文件的方式决定。

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

`app` 目录

¥The app directory

对于新应用，我们建议使用应用路由。该路由允许你使用 React 的最新功能，并且是基于社区反馈的页面路由的演变。

¥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/ 文件夹，然后添加 layout.tsx 和 page.tsx 文件。当用户访问应用的根目录 (/) 时，将渲染这些内容。

¥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 (/).

使用所需的 <html> 和 <body> 标签在 app/layout.tsx 内创建根布局：

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

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

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

最后，创建一个主页 app/page.tsx，其中包含一些初始内容：

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

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

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

很高兴知道：如果你忘记创建 layout.tsx，Next.js 将在使用 next dev 运行开发服务器时自动创建此文件。

¥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.

了解有关使用应用路由的更多信息。

¥Learn more about using the App Router.

`pages` 目录（可选）

¥The pages directory (optional)

如果你更喜欢使用页面路由而不是应用路由，你可以在项目的根目录下创建一个 pages/ 目录。

¥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 文件夹中添加 index.tsx 文件。这将是你的主页 (/)：

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

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

接下来，在 pages/ 内添加 _app.tsx 文件来定义全局布局。了解有关自定义应用文件的更多信息。

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

import type { AppProps } from 'next/app'

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

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

最后，在 pages/ 内添加一个 _document.tsx 文件来控制服务器的初始响应。了解有关自定义文档文件的更多信息。

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

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

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

了解有关使用页面路由的更多信息。

¥Learn more about using the Pages Router.

很高兴知道：尽管你可以在同一项目中使用两个路由，但 app 中的路由将优先于 pages 中的路由。我们建议在你的新项目中仅使用一台路由以避免混淆。

¥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.

`public` 文件夹（可选）

¥The public folder (optional)

创建 public 文件夹来存储静态资源，例如图片、字体等。然后，你的代码可以从基本 URL (/) 开始引用 public 目录中的文件。

¥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 (/).

运行开发服务器

¥Run the Development Server

运行 npm run dev 以启动开发服务器。

¥Run npm run dev to start the development server.
访问 http://localhost:3000 查看你的应用。

¥Visit http://localhost:3000 to view your application.
编辑 app/page.tsx（或 pages/index.tsx）文件并保存以在浏览器中查看更新的结果。

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

自动安装​

手动安装​

创建目录​

app 目录​

pages 目录（可选）​

public 文件夹（可选）​

运行开发服务器​