Skip to main content

安装

系统环境需求:

  • Node.js 18.17 or later.
  • 支持 macOS, Windows(包含 WSL), Linux

自动安装​

建议使用 create-next-app 创建 Next.js App, 它会为你自动构建所有工具. 为了创建项目, 你需要执行:

Terminal
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 会根据刚才的选项创建对应项目名称的文件夹和依赖项.

请注意:

手动安装​

为了能够手动安装 NextJs App, 你需要安装依赖如下:

Terminal
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, 在开发模式下启动 App.
  • build: 运行 next build, 为生产环境构建应用.
  • start: 运行 next start, 启动生产环境服务器.
  • lint: 运行 next lint, 启动 NextJs 的 ESLint 配置.

创建目录​

Next.js 使用文件系统路由, 即文件的目录结构决定了 App 内的路由.

app 目录​

对于新开发的 App, 我们建议使用 App Router. 该路由允许你使用 React 的最新功能, 并且该路由是基于 Page Router 演变而来的(基于社区反馈).

创建一个 app/ 文件夹, 在其内增加 layout.tsx 和 page.tsx 文件. 它们会在用户访问时(http://127.0.0.1:3000)被渲染.

app directory

在 app/layout.tsx 中创建 根布局(root layout), 必须包含 <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 dev 命令时, Next.js 会为你自动创建该文件.

学习更多 App Router 的使用.

pages 目录​

如果你更倾向于使用 Pages Router, 而不是 App Router, 那你应该在项目根目录下创建 pages/ 文件夹.

然后, 在 pages/ 文件夹内, 增加 index.tsx ( 这会是你的根路由, 即 http://127.0.0.1:3000 ), 如下:

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

接下来, 在 pages/ 文件夹内, 增加 _app.tsx 文件定义全局布局. 学习更多有关于 custom App file

_app.tsx
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

最后, 在 pages/ 文件夹内, 增加 _document.tsx 文件控制 server 返回的初始 response. 学习更多有关于 custom Document file

_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 Router 和 Pages Router, App Router 的优先级会高级 Pages Router. 我们建议在项目中仅使用一种 Router 方式, 避免产生混淆.

public 文件夹 (可选的)​

在根目录下创建 public 文件夹, 用以存储静态资源, 如: 图片, 字体等. public目录内的文件可以通过 URL( / ) 在代码中被直接使用.

启动开发服务器​

  1. 运行 npm run dev 启动开发服务器
  2. 访问 http://localhost:3000 查看应用
  3. 编辑 app/layout.tsx ( 或 pages/index.tsx ) 文件并保存, 在浏览器内查看变化

下一步​

学习 Next.js 项目中的文件和文件夹.