1. 安装 Node.js 和 npm

要开始使用 Next.js，首先需要在系统上安装 Node.js 和 npm（Node.js 的包管理器）。

1.1. 安装 Node.js 和 npm

1. 下载 Node.js：

   • 访问 Node.js 官方网站：https://nodejs.org。
   • 根据你的操作系统选择最新的 LTS（长期支持）版本并安装。

2. 验证安装：

   • 安装完成后，打开命令行（Windows 终端、macOS 终端、Linux 终端）运行以下命令，确保安装正确：

     node -v
     npm -v
     

   • 上述命令将显示 Node.js 和 npm 的版本号，表示安装成功。

2. 初始化一个 Next.js 项目

安装完成后，可以使用 Create Next App 快速创建一个 Next.js 项目。

2.1. 创建项目

在命令行中，运行以下命令：

npx create-next-app@latest

系统会提示你输入项目名称，假设项目名称为 my-next-app：

✔ What is your project named? … my-next-app

项目创建完成后，进入项目文件夹：

cd my-next-app

2.2. 启动开发服务器

Next.js 项目创建后，默认包含了必要的文件结构和配置。现在你可以启动开发服务器：

npm run dev

在浏览器中访问 http://localhost:3000，你应该会看到一个默认的 Next.js 欢迎页面，表示项目成功启动。

3. 项目的文件结构

初始化的 Next.js 项目会包含一些默认文件和文件夹。以下是常见文件结构的解释：

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   │   └── hello.js
│   ├── index.js
│   └── _app.js
├── public/
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .gitignore
├── package.json
├── README.md
└── next.config.js

3.1. 重要文件和文件夹

• pages/：​这是 Next.js 项目中的核心文件夹，Next.js 根据此目录中的文件自动创建路由。

  • index.js：默认的首页路由 (/)，你可以在这里定义主页内容。
  • api/：包含 API 路由的目录。Next.js 允许你在 pages/api/ 中创建后端 API 路由。在这里，hello.js 是一个简单的 API 路由示例。

• public/：
  这是项目中存放静态资源的文件夹，如图像、字体、文档等。所有放在 public 文件夹下的文件可以通过 / 路径直接访问。例如，public/logo.png 可以通过 /logo.png 访问。

• styles/：​用于存放项目的样式文件。

  • globals.css：全局样式文件，作用于整个应用程序。
  • Home.module.css：模块化的 CSS 文件，通常用于组件级别的样式。

• next.config.js：
  Next.js 的配置文件，你可以在这里进行一些自定义配置（可选）。

• package.json：
  项目中依赖的包和脚本管理文件。这里可以看到 react、react-dom 和 next 都已经被自动添加为项目依赖项。

4. 总结

完成这些步骤后，你已经安装了 Node.js 和 npm，并成功初始化并运行了一个基本的 Next.js 项目。通过了解项目的文件结构，接下来可以进一步深入学习如何自定义和扩展应用程序。