安装

耶和博

1216字约4分钟

2024-08-10

安装

系统要求:

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

自动安装

我们推荐使用 create-next-app 来启动一个新的 Next.js 应用程序，它会为你自动设置一切。创建项目时，运行以下命令：

npx create-next-app@latest

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

你的项目名称是什么？ my-app
是否使用 TypeScript？ 否 / 是
是否使用 ESLint？ 否 / 是
是否使用 Tailwind CSS？ 否 / 是
是否将代码放在 `src/` 目录中？ 否 / 是
是否使用 App Router？（推荐）否 / 是
是否为 `next dev` 使用 Turbopack？ 否 / 是
是否自定义导入别名（默认 `@/*`）？ 否 / 是
你希望配置什么导入别名？ @/*

在完成这些提示后，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 以开发模式启动 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 文件。当用户访问你的应用程序根目录（/）时，将会渲染这些文件。

app文件夹

创建一个包含必要 <html> 和 <body> 标签的根布局 app/layout.tsx：

app/layout.tsx

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

app/layout.js

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

最后，创建一个带有初始内容的主页 app/page.tsx：

app/page.tsx

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

app/page.js

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

提示

如果你忘记创建 layout.tsx，当你运行开发服务器时，Next.js 将会自动创建此文件。

了解更多关于使用 App Router 的信息。

`pages` 目录（可选）

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

然后，在你的 pages 文件夹中添加一个 index.tsx 文件。这将是你的主页（/）：

pages/index.tsx

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

pages/index.js

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/_app.js

export default function App({ Component, pageProps }) {
  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 Router 的信息。

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

`public` 文件夹（可选）

创建一个 public 文件夹，用于存储静态资源，如图片、字体等。public 目录中的文件可以从基 URL（/）开始引用。

运行开发服务器

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

下一步

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