Next.js 安装（完整指南）

Next.js 安装指南

Next.js 是一个基于 React 的轻量级服务端渲染（SSR）框架，适用于构建高性能的 Web 应用和静态网站。本文将围绕 Next.js 安装 提供实用教程，帮助你快速完成安装与初始化流程。

快速解决

如果你希望快速完成 Next.js 安装，直接运行以下命令：

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

该命令将创建一个名为 my-next-app 的 Next.js 项目，并自动安装所需依赖。你可以直接进入项目目录并启动开发服务器：

cd my-next-app
npm run dev

常用方法

详细说明

创建基础项目

使用 create-next-app 创建项目是 Next.js 安装 的最常用方式，适合大多数开发者。

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

• npx：确保使用最新版本的 create-next-app，无需全局安装
• create-next-app@latest：创建 Next.js 项目
• my-next-app：项目名称，可自定义

手动安装方式

如果你已经有一个 React 项目，可以手动 Next.js 安装，将 Next.js 作为开发依赖项加入：

npm install next react react-dom

随后在 package.json 中添加启动脚本：

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

使用 TypeScript 模板创建项目

Next.js 官方支持 TypeScript，你可以通过如下命令创建一个支持 TypeScript 的项目：

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

该命令会自动配置 TypeScript、TypeScript 类型支持以及相关文件结构。

高级技巧

1. 配置自定义模板

Next.js 支持从官方示例中选择模板，例如集成 Sass、Redux、Contentlayer 等。使用 --example 参数即可：

npx create-next-app@latest --example with-sass my-sass-app

这将创建一个带有 Sass 支持的项目，适合需要 CSS 预处理器的场景。

2. 安装指定版本

如果你需要 Next.js 安装 指定版本，可以通过 @ 符号后接版本号实现：

npx create-next-app@12.3.4 my-app

该命令将使用 12.3.4 版本的 Next.js 创建项目。

3. 修改默认端口

Next.js 默认使用 3000 端口启动，你可以通过修改 next.config.js 或环境变量来更改端口：

// next.config.js
module.exports = {
  devIndicators: {
    buildActivity: false,
  },
  // 设置自定义端口
  experimental: {
    devPort: 4000,
  },
};

然后启动：

npm run dev

开发服务器将运行在 http://localhost:4000。

常见问题

Q1：安装 Next.js 需要 Node.js 吗？

A1：是的。Next.js 依赖 Node.js 环境，建议使用 Node.js 18 或以上版本。安装前请确保 Node 和 npm 已正确配置。

Q2：安装完成后如何运行项目？

A2：进入项目目录后运行以下命令即可启动开发服务器：

npm run dev

默认访问地址是 http://localhost:3000。

Q3：Next.js 安装是否需要全局安装？

A3：不需要。使用 npx create-next-app 可以直接运行最新版本的脚手架，无需全局安装。

Q4：如何更新 Next.js 的版本？

A4：你可以通过 npx create-next-app@latest 创建新项目，或者手动更新依赖：

npm install next@latest

然后运行 next dev 检查是否正常。

总结

本文围绕 Next.js 安装 提供了多种实用方法，从快速命令到手动配置，再到高级用法，帮助你根据项目需求选择合适的安装方式。