Skip to main content

安装

系统要求:

  • Node.js 18.18 或更高版本.
  • 支持 macOS, Windows (包括 WSL), 和 Linux.

自动安装​

推荐使用create-next-app开始一个新应用，它会自动为您设置所有内容。要创建项目，运行：

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": {
    "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/layout.tsx 文件中，必须带有 <html> 和 <body> 标签:

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:

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的时候自动创建此文件。

Learn more about using the App Router.

pages 目录 (可选)​

如果您相对于 App Router 更喜欢 Pages Router，您能够在您的项目根目录下创建一个pages/文件夹。

然后，在您的 pages文件夹中添加一个index.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} />;
}
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

最后, 在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路由将会优先于page路由. 为了避免混乱，我们推荐在您的新项目中仅使用一种路由器.

public 文件夹 (可选)​

创建一个 public 文件夹来存储静态资源，如：图像、字体等. public文件夹下的文件能够在您的代码中以根路径(/)形式引用。

运行开发服务器​

  1. 运行 npm run dev 开启开发服务器.
  2. 访问 http://localhost:3000 浏览应用.
  3. 编辑 app/page.tsx (或 pages/index.tsx) 文件并且保存后会看见您应用程序上的更新内容。