跳至内容
简介入门安装

安装

系统要求

  • Node.js 18.18 或更高版本。
  • 支持 macOS、Windows（包括 WSL）和 Linux。

自动安装

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

终端
npx create-next-app@latest

安装过程中，您会看到以下提示

终端
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 your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

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

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

了解详情:

手动安装

要手动创建新的 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 以在开发模式下启动 Next.js。
  • build：运行 next build 以构建用于生产环境的应用程序。
  • start：运行 next start 以启动 Next.js 生产服务器。
  • lint：运行 next lint 以设置 Next.js 的内置 ESLint 配置。

创建目录

Next.js 使用文件系统路由，这意味着应用程序中的路由由您如何构建文件来决定。

app 目录

对于新应用程序，我们建议使用 App 路由器。此路由器允许您使用 React 的最新功能，并且是基于社区反馈对 页面路由器 的改进。

创建一个 app/ 文件夹，然后添加 layout.tsx 和 page.tsx 文件。当用户访问应用程序的根目录 (/) 时，将渲染这些文件。

App Folder Structure

在 app/layout.tsx 文件内创建一个 根布局，其中包含必要的 <html> 和 <body> 标签。

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

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

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

值得注意的是：如果您忘记创建 layout.tsx，Next.js 会在使用 next dev 运行开发服务器时自动创建此文件。

了解更多关于 使用 App 路由器 的信息。

pages 目录（可选）

如果您更喜欢使用 Pages 路由器而不是 App 路由器，可以在项目的根目录下创建一个 pages/ 目录。

然后，在 pages 文件夹内添加一个 index.tsx 文件。这将是您的主页 (/)。

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

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

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

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

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

了解更多关于 使用 Pages 路由器 的信息。

值得注意的是：虽然您可以在同一个项目中使用这两个路由器，但 app 中的路由将优先于 pages 中的路由。我们建议在您的新项目中只使用一个路由器，以避免混淆。

public 文件夹（可选）

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

运行开发服务器

  1. 运行 npm run dev 以启动开发服务器。
  2. 访问 https://127.0.0.1:3000 以查看您的应用程序。
  3. 编辑 app/page.tsx（或 pages/index.tsx）文件并保存，您将在浏览器中看到更新的结果。

后续步骤

了解 Next.js 项目中的文件和文件夹。

项目结构

Next.js 项目中文件夹和文件约定的列表