Next.js 入门

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

Next.js 入门

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

Next.js 是由 Vercel 公司开发和维护的开源框架，它建立在 React 之上，但提供了更多开箱即用的功能，比如服务端渲染、路由系统、API 路由等。

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>
        <main>
          {children}
        </main>
        <footer>
          <p>© 2024 我的网站</p>
        </footer>
      </body>
    </html>
  );
}

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

创建第二个页面

现在，让我们创建第二个页面，体验一下 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 的各个功能，包括路由系统、数据获取、服务端渲染等。

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

Next.js 入门

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

Next.js 入门

Next.js 是由 Vercel 公司开发和维护的开源框架，它建立在 React 之上，但提供了更多开箱即用的功能，比如服务端渲染、路由系统、API 路由等。

在深入了解 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 项目

|
node --version

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

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

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

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

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

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

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

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

接下来是关于 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>
        <main>
          {children}
        </main>
        <footer>
          <p>© 2024 我的网站</p>
        </footer>
      </body>
    </html>
  );
}

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

创建第二个页面

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

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

理解组件和页面

让我们创建一个可重用的组件。在项目根目录下创建 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（如果你在创建项目时选择了它）。

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

|
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>
  );
}

开发和生产模式

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

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

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

|
npm run build

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

|
npm start

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

小节回顾

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