如何创建一个新的 Next.js 项目？

技术 • 2024-09-02

创建一个新的 Next.js 项目通常是在本地进行的。下面是如何在本地创建一个新的 Next.js 项目的详细步骤：

1. 安装 Node.js

在创建 Next.js 项目之前，确保你已经在本地安装了 Node.js。你可以通过访问 Node.js 官方网站下载并安装最新的 LTS 版本。

2. 使用 `create-next-app` 创建项目

Next.js 提供了一个官方的工具叫做 create-next-app，它可以帮助你快速创建一个新的 Next.js 项目。你可以通过在命令行中运行以下命令来创建项目：

npx create-next-app@latest my-next-app

npx 是一个工具，允许你使用 npm 包而不需要全局安装。
create-next-app@latest 是用于创建 Next.js 项目的包。
my-next-app 是你项目的名称。你可以用任何你喜欢的名字来替换它。

3. 选择项目设置

运行上述命令后，create-next-app 将会提示你选择一些项目设置，例如：

TypeScript：是否要使用 TypeScript。
ESLint：是否要启用 ESLint 进行代码检查。
Tailwind CSS：是否集成 Tailwind CSS。
src 目录：是否要使用 src 目录。
App Router：是否要使用 Next.js 最新的 App Router（13.4+ 版本提供）。
Import Alias：是否设置路径别名（比如 @/components 指向 src/components）。

你可以根据自己的需求进行选择。如果你直接按回车键，将会采用默认选项。

4. 安装依赖项

create-next-app 将会为你自动安装所有必要的依赖项。安装完成后，你将看到类似以下的输出：

Success! Created my-next-app at /path/to/my-next-app
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd my-next-app
  npm run dev

5. 运行开发服务器

进入项目目录并启动开发服务器：

cd my-next-app
npm run dev

这将会启动 Next.js 开发服务器，并通常在 http://localhost:3000 上运行。打开你的浏览器，访问这个 URL，你将看到一个默认的 Next.js 欢迎页面，表明你的项目已经成功创建并运行。

6. 修改项目

现在，你可以开始修改项目，根据需要添加组件、页面、样式等。项目目录结构如下：

my-next-app/
├── node_modules/
├── public/
├── styles/
├── pages/
│   ├── _app.js
│   └── index.js
├── .gitignore
├── package.json
└── README.md

pages/：Next.js 使用这个目录来处理页面路由。每个文件代表一个路由。
public/：用于存放静态资源，如图片。
styles/：用于存放全局和模块化的 CSS 样式文件。

通过上述步骤，你就成功地在本地创建了一个新的 Next.js 项目，并可以在此基础上进行开发。