Next.js 项目安装与初始化完全指南
2025-07-05 00:55:29作者：秋阔奎Evelyn
前言
Next.js 作为 React 的元框架，提供了开箱即用的 SSR、SSG 等强大功能。本文将详细介绍如何从零开始安装和初始化一个 Next.js 项目，帮助开发者快速上手这个现代 Web 开发框架。
系统要求
在开始之前，请确保您的开发环境满足以下最低要求：
- Node.js 18.18 或更高版本
- 支持的操作系统：macOS、Windows（包括 WSL）和 Linux
自动安装（推荐方式）
对于大多数开发者，我们推荐使用官方提供的脚手架工具来创建项目，这种方式可以自动完成所有基础配置。
创建项目步骤
- 打开终端，执行以下命令：
npx create-next-app@latest
- 根据提示完成项目配置：
项目名称：my-app
是否使用 TypeScript？是/否
是否使用 ESLint？是/否
是否使用 Tailwind CSS？是/否
是否使用 src 目录？是/否
是否使用 App Router（推荐）？是/否
是否使用 Turbopack 进行开发？是/否
是否自定义导入别名（默认为 @/*）？是/否
自动安装的优势
- 自动配置 TypeScript、ESLint 和 Tailwind CSS
- 可选择使用 src 目录分离业务代码和配置文件
- 支持最新的 App Router 架构
- 可选择使用 Turbopack 提升开发构建速度
手动安装（高级选项）
对于需要更多自定义配置的开发者，可以选择手动安装方式。
基础依赖安装
npm install next@latest react@latest react-dom@latest
配置 package.json
在 package.json 中添加以下脚本：
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
这些脚本分别对应：
dev：开发模式build：生产构建start：生产环境启动lint：代码检查
项目目录结构
Next.js 采用文件系统路由，项目的路由由文件结构决定。
App Router（推荐）
- 创建 app 目录
- 添加 layout.tsx 和 page.tsx 文件
根布局示例
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="zh">
<body>{children}</body>
</html>
)
}
首页示例
export default function Page() {
return <h1>你好，Next.js！</h1>
}
Pages Router（传统方式）
- 创建 pages 目录
- 添加 index.tsx 文件作为首页
- 添加 _app.tsx 定义全局布局
- 添加 _document.tsx 控制服务端初始响应
静态资源目录
创建 public 文件夹用于存放：
- 图片
- 字体
- 其他静态文件
这些资源可以通过根路径（/）直接访问。
开发服务器
- 运行
npm run dev启动开发服务器 - 访问
http://localhost:3000查看应用 - 修改页面文件并保存，浏览器会自动刷新
最佳实践建议
- 对于新项目，优先选择 App Router
- 保持路由方式的一致性（避免同时使用 App 和 Pages Router）
- 合理组织项目结构，大型项目推荐使用 src 目录
- 充分利用 TypeScript 的类型检查优势
常见问题
Q：如何选择 App Router 还是 Pages Router？ A：新项目推荐使用 App Router，它支持 React 最新特性并具有更好的性能优化。
Q：Turbopack 是什么？ A：Turbopack 是 Next.js 开发团队推出的新一代构建工具，相比 Webpack 具有更快的构建速度。
Q：src 目录是必须的吗？ A：不是必须的，但对于大型项目，使用 src 目录可以更好地组织代码结构。
通过本文的指导，您应该已经掌握了 Next.js 项目的安装和初始化方法。接下来可以开始探索 Next.js 的其他强大功能，如 API 路由、静态生成、服务端渲染等。
