跳到主要内容
目录

安装

系统要求​

  • Node.js 18.17 or 更新版本
  • 支持 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文件。 当用户访问应用程序的根目录 (/) 时，将呈现这些内容。

使用所需的 <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/page.tsx 并包含一些初始内容：

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

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

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文件来控制服务器的初始响应。 了解有关自定义文档文件的更多信息。

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

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

备注

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

public文件夹（可选）​

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

运行开发服务器​

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