安装

安装

系统要求：

Node.js 版本需为 18.17 或更高。
支持 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 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 将创建一个以你的项目名称命名的文件夹，并安装所需的依赖项。

注意事项：

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

手动安装

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

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

打开你的 package.json 文件并添加以下脚本：

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 Router。该路由允许你使用 React 的最新功能，并且是基于社区反馈演变而来的 Pages Router。

创建一个 app/ 文件夹，然后添加一个 layout.tsx 和 page.tsx 文件。这些文件将在用户访问你的应用程序的根路径（/）时呈现。

安装 - 图1

在 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>
}

接下来，在 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 的更多信息：

要了解关于 Pages Router 的更多信息，你可以查阅 Next.js 官方文档中关于路由的章节。Pages Router 是 Next.js 中用于处理页面路由的一种机制，它基于文件系统结构来确定页面的路由。

在 Next.js 应用中，/pages 目录下的文件结构会映射到应用的路由。例如，/pages/index.tsx 对应应用的根路径，而 /pages/about.tsx 对应 /about 路径。

有关 Pages Router 的详细信息，请访问 Next.js 官方文档中的路由部分。

注意事项：

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

`public` 文件夹（可选）

创建一个 public 文件夹，用于存储静态资产，如图像、字体等。然后，public 目录中的文件可以通过代码从基本 URL（/）开始引用。

运行开发服务器

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

安装

安装