Logo
Published on

Next.js 入门到进阶：(二) 环境搭建与项目结构

Authors
  • avatar
    Name
    xiaobai
    Twitter

准备工作

在开始之前，请确保你的电脑上已经安装了以下软件：

  1. Node.js: Next.js 需要 Node.js 18.17.0 或更高版本。你可以在 Node.js 官网 下载并安装。
  2. 代码编辑器: 推荐使用 Visual Studio Code，它拥有强大的社区和丰富的插件生态。

你可以通过在终端运行以下命令来检查 Node.js 版本：

node -v

创建你的第一个 Next.js 应用

Next.js 官方提供了一个脚手架工具 create-next-app，可以帮助我们快速创建一个新的项目。

打开你的终端，执行以下命令：

npx create-next-app@latest

脚手架会引导你进行一系列的配置选择。对于初学者，建议按照以下选项进行（可以直接按回车键选择默认值）：

✔ What is your project named? … my-nextjs-app
✔ Would you like to use TypeScript? … No / Yes (推荐 Yes)
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No

让我们来解释一下这些选项：

  • Project name: 你的项目名称，比如 my-nextjs-app。
  • TypeScript: 是否使用 TypeScript。强烈推荐！它能提供类型安全，减少 bug。
  • ESLint: 是否使用代码检查工具 ESLint，帮助你写出更规范的代码。
  • Tailwind CSS: 是否集成流行的 CSS 框架 Tailwind CSS。
  • src/ directory: 是否将源代码（如组件和页面）放在 src 目录下，这是一种常见的项目组织方式。
  • App Router: 是否使用最新的 App Router 模式。这是 Next.js 13.4+ 的推荐功能，我们整个系列都将基于它。
  • Import alias: 是否自定义导入别名，例如用 @/* 代替 ../../..。

安装完成后，进入项目目录并启动开发服务器：

cd my-nextjs-app
npm run dev

现在，在浏览器中打开 http://localhost:3000，你应该能看到 Next.js 的欢迎页面了！

理解项目结构

使用 src 目录和 App Router 创建的项目，其结构大致如下：

my-nextjs-app/
├── .next/         // Next.js 的构建输出目录
├── node_modules/  // 项目依赖
├── public/        // 存放静态资源，如图片、favicon
│   ├── next.svg
│   └── vercel.svg
├── src/           // 源代码目录
│   └── app/       // App Router 的核心目录
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.tsx     // 根布局
│       └── page.tsx       // 首页 (/)
├── .eslintrc.json // ESLint 配置文件
├── .gitignore     // Git 忽略文件
├── next.config.js // Next.js 配置文件
├── package.json   // 项目元数据和依赖管理
├── postcss.config.js // PostCSS 配置文件 (用于 Tailwind)
└── tailwind.config.ts // Tailwind CSS 配置文件

关键文件和目录解析

  • src/app/: 这是 App Router 的核心。此目录下的文件和文件夹定义了应用的路由。

    • layout.tsx: 定义了根布局。所有页面都会被包裹在这个布局组件中。你可以在这里添加全局的导航栏、页脚等。它必须包含 <html> 和 <body> 标签。
    • page.tsx: 这是你的主页，对应于 / 路径。每个路由段都由一个 page.tsx 文件来定义其 UI。
    • globals.css: 全局样式文件，会被应用到整个项目中。

  • public/: 这个目录下的所有文件都可以通过根 URL (/) 直接访问。例如，public/my-image.png 可以通过 http://localhost:3000/my-image.png 访问。它非常适合存放图片、字体、robots.txt 等静态文件。

  • next.config.js: Next.js 的主配置文件。你可以在这里配置重定向、代理、环境变量、图像优化等高级功能。

  • .next/: 这是 Next.js 在开发和构建过程中生成的目录，包含了编译后的代码、页面缓存等。你不应该手动修改这个目录里的任何内容。

总结

恭喜你！你已经成功创建并运行了你的第一个 Next.js 应用，并且对它的项目结构有了初步的了解。

熟悉这个结构是后续学习的基础。在下一篇文章中，我们将深入探讨 App Router 的工作原理，学习如何创建新的页面、实现嵌套路由以及在页面之间进行导航。