【Next.js 入门指南】5分钟创建你的第一个 Next.js 应用

你是否曾经梦想过构建一个快速、高效且 SEO 友好的 React 应用？今天，我们将一起探索 Next.js —— 一个革命性的 React 框架，它将帮助你轻松实现这个梦想。在接下来的 5 分钟里，你将创建并运行你的第一个 Next.js 应用，开启一段激动人心的全栈开发之旅！

1. 引言：为什么选择 Next.js？

在我们动手之前，让我们先了解一下为什么 Next.js 如此受欢迎。Next.js 是一个基于 React 的强大框架，它解决了许多 React 开发中的常见问题：

• 服务器端渲染 (SSR): 提高首屏加载速度和 SEO 表现
• 静态站点生成 (SSG): 为静态内容提供超快的加载速度
• 文件系统路由: 简化路由配置，提高开发效率
• API 路由: 轻松创建后端 API 端点
• 自动代码分割: 优化加载性能
• 内置 CSS 支持: 简化样式管理

这些特性使 Next.js 成为构建现代 Web 应用的理想选择，无论是小型项目还是大规模企业应用。

2. 准备工作：搭建开发环境

在开始之前，我们需要确保你的电脑已经准备就绪。

2.1 安装 Node.js 和 npm

1. 访问 Node.js 官网
2. 下载并安装适合你操作系统的 LTS 版本
3. 安装完成后，打开终端并运行以下命令验证安装：

node --version
npm --version

如果显示版本号，说明安装成功。

2.2 选择适合的代码编辑器

虽然你可以使用任何文本编辑器，但我推荐使用 Visual Studio Code，它对 Next.js 开发有很好的支持。

1. 访问 Visual Studio Code 官网
2. 下载并安装 VS Code

3. 创建你的第一个 Next.js 项目

现在，让我们开始创建你的第一个 Next.js 项目！

3.1 使用 create-next-app 快速搭建

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

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

在安装过程中，你会看到一些选项，我们选择默认配置：

✔ Would you like to use TypeScript? … No
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … No
✔ Would you like to use `src/` directory? … No
✔ Would you like to use App Router? (recommended) … Yes
✔ Would you like to customize the default import alias? … No

3.2 项目结构解析

安装完成后，让我们看看 Next.js 为我们创建的项目结构：

my-first-next-app/
├── app/
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js
│   └── page.js
├── public/
│   ├── next.svg
│   └── vercel.svg
├── .eslintrc.json
├── .gitignore
├── next.config.js
├── package.json
└── README.md

这个结构看起来可能有点陌生，但别担心，我们很快就会熟悉它。

4. 运行和调试 Next.js 应用

4.1 启动开发服务器

在项目根目录下运行以下命令：

npm run dev

现在，打开你的浏览器，访问 http://localhost:3000。恭喜你！你的第一个 Next.js 应用已经运行起来了！

4.2 了解 Next.js 的热重载特性

试着修改 app/page.js 文件中的内容，然后保存。你会发现浏览器中的内容自动更新了，这就是 Next.js 的热重载特性，它能大大提高开发效率。

5. 探索 Next.js 项目

让我们深入了解 Next.js 项目的核心部分：

5.1 app 目录：页面和路由

在 Next.js 13 中，app 目录是新的路由系统的核心。每个文件夹代表一个路由段，每个 page.js 文件定义该路由的内容。

5.2 components 目录：可重用组件

虽然默认项目没有创建这个目录，但你可以自己创建它来存放可重用的 React 组件。

5.3 styles 目录：CSS 和样式设置

Next.js 支持多种样式解决方案。在我们的项目中，主要的全局样式文件是 app/globals.css。

5.4 public 目录：静态资源管理

将图片、字体等静态资源放在这个目录中，Next.js 会自动处理它们。

6. 创建你的第一个页面

让我们修改主页面来展示一些个性化的内容。

编辑 app/page.js：

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to My First Next.js App!</h1>
      <p className="text-xl">This is just the beginning of something amazing.</p>
    </main>
  )
}

保存文件，你会看到浏览器中的内容立即更新。

7. 使用 Next.js 的内置功能

Next.js 提供了许多内置组件来优化你的应用。让我们看两个最常用的：

7.1 Link 组件实现页面导航

创建一个新文件 app/about/page.js：

export default function About() {
  return <h1>About Us</h1>
}

然后，在 app/page.js 中添加一个链接：

import Link from 'next/link'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to My First Next.js App!</h1>
      <p className="text-xl">This is just the beginning of something amazing.</p>
      <Link href="/about" className="text-blue-500 hover:underline">
        About Us
      </Link>
    </main>
  )
}

Link 组件实现了客户端导航，使页面跳转更快速、更平滑。

7.2 Image 组件优化图片加载

Next.js 的 Image 组件可以自动优化图片加载。让我们在主页添加一个图片：

首先，将一张图片（假设名为 example.jpg）放到 public 目录下，然后修改 app/page.js：

import Image from 'next/image'
import Link from 'next/link'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to My First Next.js App!</h1>
      <Image src="/example.jpg" alt="Example Image" width={300} height={200} />
      <p className="text-xl">This is just the beginning of something amazing.</p>
      <Link href="/about" className="text-blue-500 hover:underline">
        About Us
      </Link>
    </main>
  )
}

Image 组件会自动处理图片的懒加载、大小调整和格式优化。

8. 部署你的 Next.js 应用

8.1 使用 Vercel 一键部署

Vercel 是 Next.js 的创建者，提供了最简单的部署方式：

1. 注册一个 Vercel 账号
2. 安装 Vercel CLI：npm i -g vercel
3. 在项目根目录运行：vercel
4. 按照提示完成部署

8.2 查看和分享你的作品

部署完成后，Vercel 会给你一个可访问的 URL。恭喜你，你的 Next.js 应用现在已经上线了！

9. 下一步学习计划

你已经成功创建并部署了你的第一个 Next.js 应用，这只是开始！接下来，你可以：

• 学习更多关于 Next.js 路由的知识
• 探索 Next.js 的数据获取方法
• 尝试使用 API 路由创建后端功能
• 深入了解 Next.js 的性能优化技巧

10. 总结与鼓励

在短短的几分钟里，你已经完成了一个 Next.js 应用的创建、开发和部署。这是一个令人兴奋的开始！Next.js 的世界还有很多等待你去探索。继续学习，不断实践，你会发现 Next.js 能帮助你构建出令人惊叹的 Web 应用。

记住，每个专家都是从新手开始的。保持好奇心，勇于尝试，你一定会在 Next.js 的旅程中取得巨大的进步。期待在不久的将来看到你用 Next.js 创造出的精彩作品！