Next.js 入门

欢迎来到 Next.js，在这节课中，我们将一起探索什么是 Next.js，为什么它能够成为现代 Web 开发的首选框架，以及如何创建我们的第一个 Next.js 项目。

Next.js 是一个基于 React 的全栈 Web 应用框架，它为我们提供了构建现代 Web 应用所需的一切工具。如果你要建造一座房子，React 就像是提供砖块和水泥的基础材料，而 Next.js 则是一位经验丰富的建筑师，它不仅提供了这些材料，还为你规划好了整个建筑的结构，告诉你哪里应该放窗户，哪里应该建楼梯，甚至帮你处理水电管道的布线。

Next.js 的核心优势在于它解决了传统 React 应用开发中的许多痛点。在传统的 React 单页应用中，所有的内容都需要在客户端（浏览器）中渲染，这意味着用户需要等待 JavaScript 下载和执行完成后才能看到页面内容。而 Next.js 通过服务端渲染（SSR）和静态生成（SSG）等技术，可以让页面在服务器端就准备好，然后直接发送给浏览器，大大提升了首屏加载速度。

在深入了解 Next.js 之前，让我们先思考一个问题：为什么我们需要 Next.js？或者说，Next.js 能为我们解决什么问题？

• 基于文件系统的路由：在传统的 React 应用中，我们需要安装和配置像 React Router 这样的路由库，然后手动定义路由规则。而在 Next.js 中，你只需要在 app 目录下创建文件，Next.js 就会自动为你生成对应的路由。比如，如果你创建了 app/about/page.tsx 文件，那么访问 /about 路径时就会自动渲染这个页面。
• 内置了服务端渲染和静态生成功能：这意味着你的页面可以在服务器端渲染，然后以 HTML 的形式发送给浏览器，这对于 SEO（搜索引擎优化）和首屏性能都非常重要。想象一下，当搜索引擎的爬虫访问你的网站时，如果页面内容是通过 JavaScript 动态生成的，爬虫可能无法正确索引你的内容。而 Next.js 的服务端渲染确保了页面内容在 HTML 中就已经存在，搜索引擎可以轻松地抓取和索引。
• 优秀的开发体验：它内置了热模块替换（HMR），这意味着你在修改代码时，浏览器会自动更新，无需手动刷新。它还提供了 TypeScript 支持、CSS 支持、图片优化等功能，所有这些都不需要额外的配置。
• 流畅的部署体验：Vercel 是 Next.js 的创建者，他们提供了无缝的部署体验，但 Next.js 也可以部署到任何支持 Node.js 的平台上。

创建第一个 Next.js 项目

现在，让我们开始创建我们的第一个 Next.js 项目。在开始之前，请确保你的电脑上已经安装了 Node.js（版本 18.17 或更高）。你可以在终端中运行以下命令来检查 Node.js 版本：

|
node --version

如果显示版本号，说明 Node.js 已经安装。如果没有，请先访问 Node.js 官网下载并安装。

创建 Next.js 项目非常简单，Next.js 提供了一个命令行工具 create-next-app，它可以帮我们快速搭建项目骨架。让我们在终端中运行以下命令：

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

这个命令会创建一个名为 my-nextjs-app 的新项目。npx 是 Node.js 自带的包执行工具，它会自动下载并运行 create-next-app，无需全局安装。 运行命令后，你会看到一系列提示问题。让我们一步步来看这些选项：

第一个问题是关于项目名称。如果你已经在命令中指定了项目名称（如上面的 my-nextjs-app），它会直接使用这个名称。如果没有，它会提示你输入。

接下来，它会询问你是否使用 TypeScript。TypeScript 是 JavaScript 的超集，它添加了类型系统，可以帮助我们在开发过程中发现错误。对于新项目，我们强烈建议选择 "Yes"。

然后，它会询问是否使用 ESLint。ESLint 是一个代码检查工具，可以帮助我们发现代码中的潜在问题。建议选择 "Yes"。

接下来是关于样式的选择。Next.js 支持多种 CSS 解决方案，包括：

• CSS Modules：将 CSS 文件作用域限制在组件内
• Tailwind CSS：实用优先的 CSS 框架
• Styled Components：CSS-in-JS 解决方案
• 其他选项

对于初学者，我们建议选择 Tailwind CSS，因为它提供了丰富的实用类，可以快速构建美观的界面。

然后，它会询问 src/ 目录的设置。Next.js 允许我们将代码放在 src 目录下，这样可以更好地组织项目结构。对于新项目，我们可以选择 "No"，直接使用根目录。

接下来是关于 app/ 目录的设置。Next.js 13 引入了新的 App Router，这是推荐的路由方式。我们应该选择 "Yes" 来使用 App Router。

最后，它会询问是否使用 Turbopack。Turbopack 是 Next.js 的新打包工具，比传统的 Webpack 更快。我们可以选择 "No"，使用默认的打包工具。

完成这些选择后，create-next-app 会自动安装依赖并创建项目结构。这个过程可能需要几分钟，取决于你的网络速度。

项目结构初探

项目创建完成后，让我们打开项目目录，看看 Next.js 为我们生成了什么。进入项目目录：

|
cd my-nextjs-app

然后，让我们查看项目的目录结构。在终端中运行：

|
ls -la

或者如果你使用的是 Windows，可以运行：

|
dir

你会看到类似这样的目录结构：

|
my-nextjs-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── next.config.mjs
├── package.json
├── tsconfig.json
└── README.md

让我们逐个了解这些文件和目录的作用。

• app/ 目录是 Next.js App Router 的核心。在这个目录下创建的文件和文件夹会自动成为路由。app/page.tsx对应网站的根路径/，app/about/page.tsx对应/about` 路径。
• app/layout.tsx` 是根布局文件。布局文件用于定义页面的共享结构，比如导航栏、页脚等。我们会在后面的章节中详细讲解布局的使用。
• app/globals.css` 是全局样式文件。在这里定义的 CSS 样式会应用到整个应用。
• public/目录用于存放静态资源，比如图片、字体等。放在这个目录下的文件可以通过 URL 直接访问。比如，如果你在public/logo.png放置了一张图片，可以通过/logo.png` 访问它。
• next.config.mjs` 是 Next.js 的配置文件。我们可以在这里配置各种选项，比如环境变量、重定向规则等。
• package.json` 文件包含了项目的依赖和脚本。我们可以在这里看到项目使用了哪些包，以及定义了哪些命令。
• tsconfig.json` 是 TypeScript 的配置文件。它定义了 TypeScript 编译器的选项。

启动开发服务器

现在，让我们启动开发服务器，看看我们的第一个 Next.js 应用是什么样子的。在项目根目录下运行：

|
npm run dev

这个命令会启动 Next.js 的开发服务器。你会看到类似这样的输出：

|
  ▲ Next.js 16.x.x
  - Local:        http://localhost:3000
  - Ready in 2.3s

这表示开发服务器已经启动，你可以在浏览器中访问 http://localhost:3000 来查看你的应用。

打开浏览器，访问这个地址，你会看到一个欢迎页面。这个页面是 Next.js 自动生成的，它展示了 Next.js 的一些基本信息和链接。

让我们打开 app/page.tsx 文件，看看这个页面是如何构建的。这个文件的内容可能类似这样：

|
export default function Home() {
  return (
    <div>
      <h1>欢迎来到 Next.js</h1>
    </div>
  );
}

这是一个非常简单的 React 组件。export default 表示这是这个文件的默认导出，Next.js 会使用这个组件来渲染页面。

函数名 Home 可以是任何名字，但按照约定，我们通常使用描述性的名称。这个函数返回一个 JSX 元素，这就是页面的内容。

让我们尝试修改这个页面，添加一些内容。我们可以这样修改：

|
export default function Home() {
  return (
    <div>
      <h1>欢迎来到 Next.js</h1>
      <p>这是我的第一个 Next.js 应用</p>
    </div>
  );
}

保存文件后，你会看到浏览器自动更新，显示新的内容。这就是 Next.js 的热模块替换功能在起作用。

理解布局文件

现在，让我们看看 app/layout.tsx 文件。这个文件可能类似这样：

|
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh">
      <body>
        {children}
      </body>
    </html>
  );
}

布局文件的作用是定义页面的共享结构。children 是一个特殊的 prop，它代表嵌套在这个布局中的页面内容。

在这个例子中，RootLayout 组件返回了 HTML 的基本结构，包括 <html> 和 <body> 标签。{children} 会被替换为实际页面内容。

这意味着，无论你访问哪个页面，它们都会被包裹在这个 HTML 结构中。这非常有用，因为我们可以在这里添加全局的导航栏、页脚、样式等。

让我们尝试在布局中添加一些内容：

|
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-cn">
      <body>
        <header>
          <h1>我的网站</h1>
        </header>

保存文件后，你会看到所有页面都自动添加了页头和页脚。这就是布局的强大之处。

创建第二个页面

现在，让我们创建第二个页面，体验一下 Next.js 的文件系统路由。在 app 目录下创建一个新文件夹 about，然后在这个文件夹中创建 page.tsx 文件：

|
export default function About() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>这是关于页面</p>
    </div>
  );
}

保存文件后，访问 http://localhost:3000/about，你会看到新创建的页面。这就是 Next.js 的文件系统路由：创建文件就自动创建了路由，无需我们做额外的配置。

理解组件和页面

在 Next.js 中，页面和组件有一些区别。页面是路由的入口点，它们必须放在 app 目录下，并且必须有一个默认导出的组件。组件则是可重用的 UI 片段，可以放在任何地方。

让我们创建一个可重用的组件。在项目根目录下创建 components 文件夹，然后创建 Button.tsx 文件：

|
export default function Button({ children }: { children: React.ReactNode }) {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded">
      {children}
    </button>
  );
}

这是一个简单的按钮组件。children prop 允许我们传递内容给按钮。

现在，让我们在页面中使用这个组件。首先，我们需要导入它：

|
import Button from '@/components/Button';
 
export default function Home() {
  return (
    <div>
      <h1>欢迎来到 Next.js</h1>
      <p>这是我的第一个 Next.js 应用</p>
      <Button>点击我</Button>
    </div>
  );
}

注意这里的 @/ 前缀。这是 TypeScript 的路径别名，它指向项目的根目录。这个别名是在 tsconfig.json 中配置的。

样式初探

Next.js 支持多种样式方案。让我们看看如何使用 Tailwind CSS（如果你在创建项目时选择了它）。

Tailwind CSS 使用实用类来构建样式。比如，bg-blue-500 表示蓝色背景，text-white 表示白色文字，px-4 表示水平内边距为 1rem，py-2 表示垂直内边距为 0.5rem，rounded 表示圆角。

让我们修改页面，添加一些样式：

|
export default function Home() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-4xl font-bold mb-4">欢迎来到 Next.js</h1>
      <p className="text-lg text-gray-600 mb-4">
        这是我的第一个 Next.js 应用
      </p>
      <Button>点击我</Button>
    </div>

这里，container 类设置最大宽度并居中，mx-auto 表示水平方向自动边距（居中），px-4 和 py-8 设置内边距，text-4xl 设置大字体，font-bold 设置粗体，mb-4 设置下边距，text-lg 设置较大字体，text-gray-600 设置灰色文字。

开发和生产模式

Next.js 有两种运行模式：开发模式和生产模式。

开发模式就是我们刚才使用的 npm run dev。在这种模式下，Next.js 会提供热模块替换、详细的错误信息、开发工具等功能，方便我们开发和调试。

生产模式是应用部署后的运行模式。要构建生产版本，我们需要运行：

|
npm run build

这个命令会优化代码，生成生产版本。构建完成后，我们可以运行：

|
npm start

这会启动生产服务器。生产模式下的应用会更快，但不会提供我们所需要的开发工具，比如热模块替换、错误提示等。

小节回顾

在第一节课中，我们了解了 Next.js 是什么，为什么选择它，以及如何创建第一个 Next.js 项目。我们学习了项目的基本结构，创建了第一个页面，理解了布局的作用，创建了可重用的组件，并初步接触了样式系统。

Next.js 的强大之处在于它为我们提供了完整的开发工具链，从开发到部署都有完善的解决方案。在接下来的学习中，我们将深入学习 Next.js 的各个功能，包括路由系统、数据获取、服务端渲染等。

记住，学习编程最好的方式就是实践。不要只是阅读，要动手尝试修改代码，看看会发生什么，让我们继续探索吧！