快速了解 Next.js：基础与入门 – wiki基地

作者： /

快速了解 Next.js：基础与入门

在当今快速发展的 Web 开发领域，React 作为构建用户界面的强大库，已经赢得了广泛的认可。然而，纯粹的客户端 React 应用在处理诸如搜索引擎优化（SEO）、首屏加载速度和复杂路由管理等方面时，可能会遇到一些挑战。为了解决这些问题，并进一步提升开发效率和应用性能，全栈 React 框架应运而生，而 Next.js 便是其中最受欢迎和功能最全面的一个。

本文旨在帮助您快速掌握 Next.js 的基础知识，理解其核心优势，并通过实际操作带领您踏入 Next.js 的世界。无论您是刚刚接触 React，还是希望将现有的 React 项目升级到更强大的框架，亦或是对构建高性能、可扩展的 Web 应用感兴趣，这篇文章都将为您提供一个清晰的入门指南。

我们将从 Next.js 的定义和它解决的问题开始，深入探讨其关键特性，例如服务器端渲染（SSR）、静态网站生成（SSG）、文件系统路由、数据获取策略以及 API 路由等。通过阅读本文，您将不仅了解 Next.js 是什么，更重要的是，您将理解为什么它如此重要，以及如何开始使用它来构建现代化的 Web 应用。

让我们一起揭开 Next.js 的神秘面纱，开启高效、高性能的 Web 开发之旅吧！

第一章：为何选择 Next.js？理解它的核心价值

纯粹的 React 应用通常在浏览器中运行，这意味着页面的内容是在客户端通过 JavaScript 渲染出来的。这种模式被称为客户端渲染（Client-Side Rendering, CSR）。CSR 有其优点，例如构建单页面应用（SPA）时用户体验流畅，页面切换无需重新加载。然而，它也存在一些固有的缺点：

  1. 搜索引擎优化（SEO）挑战： 搜索引擎爬虫在抓取页面时，可能无法有效地解析和索引那些依赖 JavaScript 才能生成内容的页面。虽然现代搜索引擎在这方面有所改进，但服务器端渲染仍然是确保内容能被快速、准确索引的最可靠方式。
  2. 首屏加载速度： 在客户端渲染中，浏览器需要下载、解析并执行大量的 JavaScript 代码后才能显示实际内容。这会导致用户在看到页面内容之前需要等待较长时间，尤其是在网络条件较差或设备性能较低的情况下。
  3. 构建复杂度： 对于复杂的应用，开发者需要手动配置路由、代码分割、性能优化等方面，这增加了项目的构建和维护复杂度。
  4. 数据获取： 在 CSR 中，数据通常在组件挂载后通过 useEffect 或类似方式获取，这可能导致页面在数据加载完成前显示加载状态或空白内容（”白屏”）。

Next.js 就是为解决这些问题而诞生的全栈 React 框架。它在 React 的基础上，提供了开箱即用的解决方案和优化，让您能够轻松构建同时具备优秀用户体验、高性能和良好 SEO 的 Web 应用。

Next.js 的核心价值体现在以下几个关键特性上：

  • 多样的渲染策略（Hybrid Rendering）： Next.js 允许您为应用的每个页面选择最适合的渲染策略，包括服务器端渲染（SSR）、静态网站生成（SSG）、增量静态再生（ISR）以及客户端渲染（CSR）。这极大地提高了应用的灵活性和性能。
  • 文件系统路由（File-system Routing）： 无需手动配置路由，Next.js 基于 app 或 pages 目录结构自动生成路由。这种直观的方式简化了路由管理。
  • 优化的数据获取： Next.js 提供了在服务器端或构建时获取数据的能力，确保页面在发送到客户端之前就已经包含了必要的内容，从而减少了加载时间并改善了用户体验。
  • API 路由（API Routes）： 您可以在 Next.js 项目中直接创建 API 接口，构建全栈应用，无需单独搭建后端服务（或可以作为现有后端的 BFF – Backend For Frontend）。
  • 代码分割（Code Splitting）： Next.js 默认对应用进行代码分割，只加载当前页面所需的 JavaScript 代码，显著提高了应用的加载性能。
  • 内置优化： Next.js 提供了 <Image> 组件进行图像优化、<Font> 组件进行字体优化等，进一步提升了应用的性能。
  • 良好的开发者体验（Developer Experience, DX）： 热模块替换（HMR）让您在开发过程中快速看到代码更改的效果；清晰的错误提示；完善的文档和社区支持，都使得使用 Next.js 进行开发变得愉快而高效。

总而言之，选择 Next.js 意味着您选择了一个能够帮助您构建高性能、可扩展、易于维护的现代 Web 应用的强大工具。它处理了许多底层的配置和优化细节，让您可以更专注于业务逻辑的实现。

第二章：迈出第一步：创建您的第一个 Next.js 应用

开始使用 Next.js 非常简单。您只需要 Node.js 环境（建议使用 LTS 版本）和一个终端。Next.js 提供了官方的创建工具 create-next-app，它可以帮助您快速搭建一个具备基础配置的新项目。

打开您的终端，输入以下命令：

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

执行此命令后，create-next-app 会启动一个交互式向导，询问您关于项目的一些配置选项：

``
What is your project named? my-nextjs-app
Would you like to use TypeScript? (Yes)
Would you like to use ESLint? (Yes)
Would you like to use Tailwind CSS? (No)
Would you like to usesrc/` directory? (No)
Use App Router (recommended)? (Yes)
Would you like to customize the default import alias (@/*)? (No)

Creating a new Next.js app in /path/to/your/project/my-nextjs-app.

… 安装依赖 …

Success! Created my-nextjs-app at /path/to/your/project/my-nextjs-app
Inside that directory, you can run several commands:

npm run dev
Starts the development server.

npm run build
Builds the production optimized app.

npm run start
Starts the production server.

npm run lint
Runs ESLint to check for errors.

We suggest that you begin by typing:

cd my-nextjs-app
npm run dev
“`

在向导中，我们推荐选择以下选项（括号中是我的建议，您可以根据实际情况调整）：

  • Would you like to use TypeScript? (Yes): TypeScript 可以帮助您写出更健壮、易于维护的代码。
  • Would you like to use ESLint? (Yes): ESLint 是一个代码风格检查工具，有助于保持代码一致性和减少潜在错误。
  • Would you like to use Tailwind CSS? (No): 您可以选择是否集成 Tailwind CSS，这取决于您的项目需求。如果不需要，选择 No。
  • Would you like to use src/ directory? (No): 选择 No 会将所有源代码放在项目根目录下的相关文件夹中（如 app, public 等），这也是 Next.js 官方文档中常用的结构。选择 Yes 会将这些文件夹放在一个 src 子目录中。
  • Use App Router (recommended)? (Yes): 这是 Next.js v13+ 引入的新的路由和渲染范式，也是官方推荐的未来方向。本文后续将主要基于 App Router 进行讲解。 如果您在维护旧项目或学习旧版本，可能会选择 Pages Router。
  • Would you like to customize the default import alias (@/*)? (No): 默认的 @/ 别名很方便，无需更改。

根据您的选择，create-next-app 会安装所需的依赖并创建项目文件结构。

创建完成后，进入项目目录：

bash
cd my-nextjs-app

然后启动开发服务器：

bash
npm run dev

或者使用 yarn/pnpm：

“`bash
yarn dev

或

pnpm dev
“`

您的 Next.js 应用现在已经在本地运行起来了！打开浏览器，访问 http://localhost:3000，您应该能看到 Next.js 的默认欢迎页面。

恭喜您！您已经成功创建并运行了第一个 Next.js 应用。接下来，我们将探索这个项目的结构以及如何在此基础上进行开发。

第三章：探索项目结构：App Router 深度解析

正如前面提到的，Next.js v13+ 推出了全新的 App Router，它建立在 React Server Components 的基础上，带来了更灵活、更强大的渲染能力和更好的性能。create-next-app 默认创建的项目就使用了 App Router。让我们看看这个项目的核心文件结构（如果您选择了不使用 src 目录）：

my-nextjs-app/
├── app/ # App Router 的核心目录
│ ├── api/ # API 路由 (Route Handlers) 目录
│ │ └── hello/
│ │ └── route.ts # 例如: /api/hello 路由
│ ├── (group)/ # 可选: 路由分组
│ ├── [dynamic]/ # 可选: 动态路由段
│ ├── layout.tsx # 布局文件 (根布局)
│ ├── page.tsx # 页面文件 (首页)
│ └── globals.css # 全局样式
├── public/ # 静态资源目录 (图片, 字体等)
│ └── favicon.ico
├── next.config.js # Next.js 配置文件
├── package.json # 项目依赖和脚本
├── tsconfig.json # TypeScript 配置文件 (如果选择了 TS)
├── .eslintrc.json # ESLint 配置文件 (如果选择了 ESLint)
├── .gitignore # Git 忽略文件
└── README.md

其中，app 目录是 App Router 的核心。Next.js 根据 app 目录的子文件夹结构自动生成路由。

  • app/layout.tsx: 这是根布局文件。在 App Router 中，布局文件用于定义 UI 的共享部分，例如导航栏、页脚等。layout.tsx 是所有页面共享的最顶层布局。它必须包含一个接受 children 属性的 React 组件，children 会是当前路由段的页面或嵌套布局。
  • app/page.tsx: 这是根页面文件。app 目录下的 page.tsx 对应应用的根路由 (/)。页面文件必须导出一个默认的 React 组件。
  • 文件夹作为路由段： app 目录下的每个文件夹都代表一个路由段。例如，创建一个 app/dashboard/page.tsx 文件，就对应 /dashboard 路由。
  • page.tsx 文件： 在任何文件夹内，page.tsx 文件是该路由段的入口点，它定义了该路由段的 UI。
  • layout.tsx 文件（嵌套布局）： 在 app 目录的子文件夹中也可以创建 layout.tsx 文件。这会创建嵌套布局，该布局会包裹其所在文件夹及其子文件夹中的所有页面。例如，app/dashboard/layout.tsx 会包裹 /dashboard 及其所有子路由（如 /dashboard/settings）的页面。嵌套布局会继承其父级布局。
  • api/ 目录和 route.ts 文件： app/api 目录用于创建 API 路由。在 api 目录或其子目录中创建 route.ts（或 .js, .jsx, .tsx）文件，可以定义处理特定 HTTP 方法（GET, POST, PUT, DELETE 等）的请求处理函数。例如，app/api/users/route.ts 可以处理 /api/users 的 API 请求。

除了 page.tsx 和 layout.tsx，App Router 还引入了一些特殊的约定文件，它们可以用来处理路由段的特定行为：

  • template.tsx: 类似于 layout.tsx，但也接收 children。不同之处在于，当用户在属于该模板的路由段之间导航时，template.tsx 会创建一个新的实例并重新渲染其子组件，而 layout.tsx 会保留其组件实例。这对于需要基于每次导航都有不同行为（例如，退出动画）的情况非常有用。
  • loading.tsx: 用于创建加载 UI。当路由段正在加载数据时，loading.tsx 中导出的组件会立即显示，包裹在 layout.tsx 中，而页面内容加载完成后会替换掉加载 UI。
  • error.tsx: 用于创建错误 UI。当路由段或其子组件发生错误时，error.tsx 中导出的组件会显示，包裹在 layout.tsx 中，代替出错的内容。这有助于在不中断整个应用的情况下优雅地处理错误。
  • not-found.tsx: 用于创建未找到（404）页面。当请求的路由无法匹配时，会显示该文件导出的组件。
  • default.tsx: 用于并行路由（Parallel Routes）中，在没有匹配到特定路由段时显示默认内容。这是一个相对高级的概念，入门阶段可以先了解其存在。

public 目录：

public 目录用于存放静态资源，如图片、字体、robots.txt、favicon.ico 等。这些文件可以直接通过应用的根 URL 访问，例如 public/favicon.ico 可以通过 /favicon.ico 访问。

next.config.js：

这是 Next.js 的配置文件，您可以在这里进行各种自定义配置，例如设置环境变量、配置图片优化、自定义 Webpack 配置等。

理解 App Router 的文件结构和约定是掌握 Next.js 的关键。它通过文件系统直观地映射了应用的 UI 结构、路由和一些状态处理逻辑。

第四章：核心机制：路由与导航

Next.js 的路由系统是其强大之处之一，尤其是在 App Router 中，它与 React Server Components 和渲染策略紧密结合。

1. 文件系统路由 (App Router)

正如第三章所述，App Router 的路由完全基于 app 目录下的文件夹结构：

  • 静态路由： app/about/page.tsx 对应 /about。
  • 嵌套路由： app/dashboard/settings/page.tsx 对应 /dashboard/settings。
  • 索引路由： app/dashboard/page.tsx 对应 /dashboard。

  • 动态路由段： 使用方括号 [] 创建动态路由段。例如，app/products/[slug]/page.tsx 可以匹配 /products/handbook 或 /products/socks。在页面组件或布局组件中，可以通过 params props 访问动态路由段的值：

    “`typescript
    // app/products/[slug]/page.tsx
    import React from ‘react’;

    interface ProductPageProps {
    params: {
    slug: string;
    };
    }

    export default function ProductPage({ params }: ProductPageProps) {
    const productSlug = params.slug;
    // 根据 productSlug 获取产品数据并渲染
    return (

    Product: {productSlug}

    {/ 其他产品信息 /}

    );
    }
    “`

  • 捕获所有路由 (Catch-all Segments)： 使用三个点 ... 创建捕获所有路由段。例如，app/shop/[...slug]/page.tsx 可以匹配 /shop/a，/shop/a/b，/shop/a/b/c 等。params.slug 会是一个包含所有捕获部分的数组。

  • 可选捕获所有路由 (Optional Catch-all Segments)： 使用两个方括号 [[...slug]] 创建可选捕获所有路由段。例如，app/docs/[[...slug]]/page.tsx 可以匹配 /docs 以及 /docs/a，/docs/a/b 等。对于根路径 /docs，params.slug 将是 undefined。

2. 导航

在 Next.js 应用中进行客户端导航，推荐使用 next/link 组件。<Link> 组件会预取（prefetch）链接页面的代码，使其在点击时几乎瞬间加载。

“`typescript
// 在任何 React 组件中使用 next/link
import Link from ‘next/link’;
import React from ‘react’;

export default function Navigation() {
return (

);
}
“`

使用 <Link> 组件时，href 属性是必需的，它可以是字符串或一个对象。<Link> 组件会自动处理客户端路由跳转，而不会触发浏览器刷新。

对于更复杂的导航场景，例如在某个事件发生后进行程序化导航（例如表单提交成功后跳转），您可以使用 next/navigation 模块提供的 useRouter 钩子（需要在 Client Component 中使用）：

“`typescript
// 在一个 Client Component 中 (需要顶部加 ‘use client’)
‘use client’;

import { useRouter } from ‘next/navigation’;
import React from ‘react’;

export default function MyClientComponent() {
const router = useRouter();

const handleButtonClick = () => {
// 进行程序化导航
router.push(‘/dashboard’);
};

return (

);
}
“`

useRouter 提供了 push, replace, back, forward, refresh 等方法，用于控制路由栈和导航行为。

第五章：核心能力：渲染策略与数据获取

Next.js 最强大的特性之一是其灵活的渲染能力。App Router 默认采用基于 React Server Components 的混合渲染策略，这意味着页面可以在服务器上渲染、在构建时预渲染，或者在客户端渲染，并且可以在同一个应用中混合使用这些策略。

1. 渲染策略概览

  • 服务器端渲染 (Server-Side Rendering, SSR): 在每次用户请求页面时，服务器动态生成页面的 HTML 并发送到浏览器。适用于需要根据请求实时生成内容、对 SEO 要求高、且数据变化频繁的页面。在 App Router 中，Server Components 是默认的渲染方式，它们在服务器上执行，并且默认是 SSR。
  • 静态网站生成 (Static Site Generation, SSG): 在构建时（next build 命令执行时）预先生成页面的 HTML。适用于内容相对静态、更新不频繁、对加载速度和 SEO 要求极高的页面（如博客文章、产品详情页）。SSG 生成的静态文件可以直接由 CDN 提供，性能极高。在 App Router 中，如果 Server Component 不使用动态函数（如 headers, cookies）且数据 fetching 可以被缓存或在 build 时完成，默认也会被优化为静态渲染。您可以通过配置强制静态渲染。
  • 增量静态再生 (Incremental Static Regeneration, ISR): 结合了 SSG 和 SSR 的优点。在构建时生成页面，但在部署后，可以按需或按时重新生成特定页面，而无需完全重建整个应用。这使得静态页面的内容可以保持“最新”，同时仍然享受静态服务的性能优势。通过配置 revalidate 选项实现。
  • 客户端渲染 (Client-Side Rendering, CSR): 在浏览器中通过 JavaScript 渲染页面内容。适用于需要大量客户端交互、内容不依赖 SEO、或者需要在用户登录后才显示的应用部分。在 App Router 中，需要显式地将组件标记为 use client 才能进行 CSR。

2. Server Components 与 Client Components

App Router 的渲染策略核心在于区分 Server Components (服务器组件) 和 Client Components (客户端组件)。

  • Server Components (默认):

    • 在服务器上执行。
    • 默认可以访问文件系统、数据库等后端资源。
    • 不能使用 React hooks (如 useState, useEffect)。
    • 不能处理浏览器事件 (如 onClick)。
    • 默认在构建时或请求时渲染为静态 HTML。
    • 性能优势：减少发送到客户端的 JavaScript 代码量，提高首屏加载速度。

  • Client Components ('use client'):

    • 在客户端（浏览器）执行。
    • 可以使用 React hooks。
    • 可以处理浏览器事件。
    • 适用于需要交互性、管理状态、访问浏览器 API 的 UI 部分。
    • 需要在文件的顶部添加 'use client' 指令来标记。

如何选择？

  • 默认情况下，所有组件都是 Server Components。
  • 只有当您需要使用 hooks 或事件监听器时，才将其标记为 Client Component。
  • 将 Client Components 放在您的组件树的“叶子”节点，让尽可能多的组件保持为 Server Components，以获得性能优势。

示例：

“`typescript
// app/page.tsx (默认是 Server Component)
import React from ‘react’;
import Counter from ‘./Counter’; // 导入一个客户端组件

async function getData() {
// 在 Server Component 中直接获取数据
const res = await fetch(‘https://api.example.com/data’);
if (!res.ok) {
throw new Error(‘Failed to fetch data’);
}
return res.json();
}

export default async function HomePage() {
const data = await getData(); // 在服务器端获取数据

return (

Welcome Home

Data fetched on server: {data.message}

{/ 在 Server Component 中使用 Client Component /}

);
}
“`

“`typescript
// app/Counter.tsx (这是一个 Client Component)
‘use client’; // 标记为客户端组件

import { useState } from ‘react’;
import React from ‘react’;

interface CounterProps {
initialCount: number;
}

export default function Counter({ initialCount }: CounterProps) {
const [count, setCount] = useState(initialCount);

return (

Count: {count}

{/ 在客户端组件中处理事件 /}

);
}
“`

在这个例子中，HomePage 是一个 Server Component，它在服务器上获取数据。然后它渲染了一个 Counter 组件，这是一个 Client Component，因为它需要使用 useState 和处理点击事件。数据获取发生在服务器，而交互发生在客户端。

3. 数据获取 (Data Fetching)

在 App Router 中，推荐的数据获取方式是在 Server Components 中使用异步函数 (async / await) 和原生的 fetch API。Next.js 扩展了 fetch API，提供了强大的缓存和去重能力。

“`typescript
// 在 Server Component 中获取数据
async function getPosts() {
const res = await fetch(‘https://api.example.com/posts’, {
cache: ‘force-cache’, // 默认值，等同于 ‘no-cache’ 但允许使用 etag/last-modified 进行缓存协商
// 或者 { cache: ‘no-store’ } 禁用缓存，每次请求都重新获取
// 或者 { next: { revalidate: 60 } } 启用 ISR，每 60 秒重新验证一次数据
});

if (!res.ok) {
throw new Error(‘Failed to fetch posts’);
}

return res.json();
}

export default async function PostsPage() {
const posts = await getPosts(); // 等待数据获取完成

return (

Posts

    {posts.map((post) => (

  • {post.title}

    • ))}

);
}
“`

在 Client Components 中，您仍然可以使用传统的客户端数据获取方法，例如：

  • useEffect 和 useState 结合 fetch 或 axios。
  • 使用 SWR 或 React Query 等客户端数据获取库。

但请记住，在 Server Components 中获取数据并将其传递给 Client Components 通常是更优的选择，因为它发生在服务器端，减少了客户端加载时间，并简化了组件逻辑。

第六章：构建后端：API 路由 (Route Handlers)

Next.js 不仅仅是前端框架，它也是一个全栈框架。通过 API 路由（在 App Router 中称为 Route Handlers），您可以在 Next.js 项目中轻松创建后端 API 端点。

API 路由位于 app/api 目录下，通过创建 route.ts（或其他支持的扩展名）文件来定义。每个 route.ts 文件可以包含一个或多个处理不同 HTTP 方法（GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS）的异步函数。

示例：创建 /api/hello 路由

创建文件 app/api/hello/route.ts：

“`typescript
// app/api/hello/route.ts
import { NextResponse } from ‘next/server’;

export async function GET(request: Request) {
// 处理 GET 请求
const { searchParams } = new URL(request.url);
const name = searchParams.get(‘name’) || ‘World’;

return NextResponse.json({ message: Hello, ${name}! });
}

export async function POST(request: Request) {
// 处理 POST 请求
const data = await request.json();

return NextResponse.json({ received: data, status: ‘Success’ }, { status: 201 });
}
“`

现在，当您访问 /api/hello 时，会执行 GET 函数并返回 JSON 响应。发送 POST 请求到 /api/hello 时，会执行 POST 函数。

访问请求数据：

API 路由处理函数接收一个 Request 对象作为参数，您可以从中获取请求方法、URL、请求头、请求体等信息。

  • 获取请求体 (POST, PUT 等): const data = await request.json() 或 await request.text() 等。
  • 获取 URL 参数: const { searchParams } = new URL(request.url)。

发送响应：

使用 next/server 提供的 NextResponse 对象来创建和发送响应。NextResponse.json() 是发送 JSON 响应的便捷方法。您也可以使用 NextResponse.text(), NextResponse.xml(), NextResponse.redirect() 等。

API 路由使得在同一个 Next.js 项目中处理前端和后端逻辑成为可能，非常适合构建小型到中型应用，或者作为复杂微服务架构的前端代理（BFF）。

第七章：样式与静态资源

在 Next.js 应用中应用样式有多种方式，您可以选择最适合您的项目和团队的方式：

  1. 全局 CSS： 在 app 目录下的 globals.css 文件中定义全局样式。这个文件会被自动引入到您的应用中，影响所有页面。

  2. CSS Modules： Next.js 原生支持 CSS Modules。通过将 CSS 文件命名为 [name].module.css，您可以创建局部作用域的 CSS 类名，避免样式冲突。在组件中引入并使用：

    css
    /* components/Button.module.css */
    .button {
    padding: 10px 20px;
    background-color: blue;
    color: white;
    border-radius: 5px;
    }

    “`typescript
    // components/Button.tsx (Client Component, 如果需要事件处理)
    ‘use client’;

    import styles from ‘./Button.module.css’;
    import React from ‘react’;

    export default function Button() {
    return (

    );
    }
    “`

  3. CSS-in-JS 库： 您可以使用像 Styled Components、Emotion 等 CSS-in-JS 库。通常需要一些额外的配置（例如，对于 SSR 确保样式正确注入）。

  4. Tailwind CSS： create-next-app 提供了集成 Tailwind CSS 的选项。Tailwind CSS 是一个功能类优先的 CSS 框架，通过类名组合来构建 UI。

静态资源：

所有放在 public 目录下的文件都可以通过根路径直接访问。例如，如果您有一个图片文件 public/images/logo.png，您可以在代码中通过 /images/logo.png 来引用它。

“`typescript
import Image from ‘next/image’;
import React from ‘react’;

export default function Header() {
return (

{/ 使用 next/image 组件进行图片优化 /}
My Logo

);
}
“`

推荐使用 Next.js 提供的 <Image> 组件来加载图片。它会自动对图片进行优化（延迟加载、不同设备尺寸的图片、WebP 格式转换等），显著提升性能。

第八章：部署您的 Next.js 应用

将 Next.js 应用部署上线也非常简单。Next.js 的创建者 Vercel 提供了对 Next.js 应用的零配置部署，这是最推荐的方式。

  1. Vercel 平台：

    • 将您的代码推送到 Git 仓库（GitHub, GitLab, Bitbucket）。
    • 注册 Vercel 账号，并连接您的 Git 仓库。
    • 导入您的 Next.js 项目。Vercel 会自动检测到这是一个 Next.js 项目，并使用正确的构建命令 (next build) 和启动命令 (next start)。
    • 每次您推送到 Git 仓库的特定分支（通常是 main 或 master），Vercel 都会自动构建和部署您的应用。
    • Vercel 的基础设施对 Next.js 进行了深度优化，支持 SSR, SSG, ISR 和 Serverless Functions（用于 API 路由），性能极佳。

  2. 其他平台：

    • Netlify: 也可以部署 Next.js 应用，通常需要一些额外的配置或使用 Netlify Functions 来处理 SSR 和 API 路由。
    • Node.js Server: Next.js 可以构建成一个标准的 Node.js 应用。运行 npm run build 会在 .next 目录生成用于生产环境的文件。然后运行 npm run start 会启动一个 Node.js 服务器来提供应用。您可以将 .next 目录部署到任何可以运行 Node.js 应用的环境中（例如 Heroku, AWS EC2, Docker 容器等）。需要注意的是，这种方式需要您自己管理服务器，并且可能无法完全利用 Next.js 的所有优化特性（如边缘函数）。
    • 静态导出 (Static Export): 对于完全静态的网站，您可以将 Next.js 应用导出为一组静态 HTML、CSS 和 JS 文件。在 next.config.js 中配置 output: 'export'，然后运行 npm run build。生成的 out 目录中的文件可以部署到任何静态文件托管服务（如 Netlify, Vercel, GitHub Pages, CDN 等）。请注意，静态导出不支持 SSR、ISR、API 路由以及需要 Node.js 环境的其他特性。 App Router 中的 Server Components 大部分情况下无法静态导出。

对于大多数 Next.js 应用，尤其是在使用 App Router 的情况下，部署到 Vercel 是最简单、最高效且能充分发挥 Next.js 特性的方式。

第九章：下一步：进阶与实践

恭喜您！您已经快速掌握了 Next.js 的基础知识和核心概念。这仅仅是开始，Next.js 还有很多更高级的特性等待您探索：

  • Middleware (中间件): 在请求到达页面或 API 路由之前执行代码，例如进行身份验证、重定向、修改请求头等。
  • Image Optimization (next/image): 深入了解如何利用 <Image> 组件进行更高级的图片优化配置。
  • Font Optimization (next/font): 如何优化字体加载以提高性能。
  • Dynamic Imports (next/dynamic): 动态导入组件或库，实现更细粒度的代码分割。
  • Head Component (next/head 或 Metadata API): 管理页面的 <head> 内容，包括标题、元描述等，对 SEO 至关重要（App Router 中推荐使用 Metadata API）。
  • Environment Variables (环境变量): 如何在 Next.js 应用中安全地使用环境变量。
  • Authentication (身份验证): 集成各种身份验证方案（如 NextAuth.js）。
  • 国际化 (i18n): 构建多语言网站。
  • 单元测试与集成测试： 如何测试您的 Next.js 应用。

实践是学习的关键。 现在，您可以尝试以下步骤来巩固您的知识：

  1. 修改您的第一个 Next.js 应用：

    • 添加一个新页面，例如 /blog 和 /blog/[slug]。
    • 在 /blog 页面列出一些博客文章，链接到 /blog/[slug]。
    • 在 /blog/[slug] 页面根据 slug 获取并显示文章内容（模拟数据获取）。
    • 添加一个简单的导航栏，使用 <Link> 进行页面间的跳转。
    • 尝试在页面中创建并使用一个 Client Component，例如一个可交互的计数器。
    • 创建一个简单的 API 路由，例如 /api/posts，返回一个文章列表的 JSON 数据。
    • 尝试部署您的应用到 Vercel。

  2. 学习官方文档： Next.js 的官方文档非常详细和及时更新，是深入学习的最佳资源。特别是关于 App Router、数据获取和渲染策略的部分，值得仔细阅读。

  3. 参考示例项目： Next.js 官方和社区提供了大量的示例项目，涵盖了各种场景和技术栈，您可以从中学习最佳实践。

  4. 参与社区： 加入 Next.js 的 Discord 服务器、GitHub 讨论区等，与其他开发者交流学习。

总结

Next.js 是一个功能强大、灵活且易于使用的全栈 React 框架，它通过提供多种渲染策略、基于文件系统的路由、优化的数据获取、API 路由以及内置的性能优化，极大地提升了现代 Web 应用的开发效率和应用性能。

本文从 Next.js 的价值出发，详细介绍了如何创建项目、App Router 的文件结构、路由与导航、核心的渲染策略与数据获取机制、API 路由以及样式和部署等方面。通过掌握这些基础知识，您已经具备了使用 Next.js 构建大部分 Web 应用的能力。

Web 开发是一个不断演进的领域，Next.js 也在持续发展。拥抱新的范式（如 App Router 和 Server Components）将帮助您构建更高效、更具未来感的应用。

希望这篇文章为您快速入门 Next.js 提供了清晰的指引。现在，是时候动手实践，去创造属于您的精彩 Web 应用了！祝您在 Next.js 的世界里开发愉快！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部