关于Next.js的App Router：详细笔记

简介

• Next.js App Router 是基于 React 的路由系统，提供了新的功能和概念，目前已接近完全稳定。

• 本文将介绍 App Router 的基础功能，包括路由、布局、数据获取、元数据等。

1. 路由系统

布局（Layouts）

• 文件位置：在 app 文件夹中，创建 layout.tsx。

• 作用：定义整个应用的路由布局，接收子组件（children），并渲染它们。

• 特点：

  • 页面与布局是通过组合 React 组件实现的。

  • 当访问 localhost:3000 时，页面的渲染是布局和页面的组合。

页面组件（Pages）

• 文件位置：创建 page.tsx 文件。

• 作用：

  • 定义页面内容（每个 page.tsx 是一个路由）。

• • 页面与布局组合，生成可访问的 UI。

• 默认行为：App Router 中的所有页面和布局组件默认是 React 服务器组件（Server Components）。

  • 服务器组件只在服务器端运行，减少了客户端的 JavaScript 代码量，提高了安全性。

  • 如果这个页面中有客户端（运行在前端）组件，需要在page.tsx的第一行加上'use client'。

  • 常见的客户端组件：React状态-useState，useReducer，useEffect...

动态路由

• 使用方括号（[id]）定义动态路由。例如：

  • 新建文件夹 blog，在其内部创建 [id] 文件夹。

  • 在 [id] 文件夹中定义 page.tsx，路由格式为 /blog/:id。

• 在组件中通过 props.params.id 获取动态路由段的值。

2. 数据获取（Data Fetching）

基本数据获取

• App Router 简化了数据获取，基于 React 的新特性构建。

• 异步组件：将组件声明为异步（async），可通过 await 获取动态数据。

• const response = await fetch("API_ENDPOINT");
  const data = await response.json();

使用 TypeScript

• 定义数据类型以提高开发效率。

• type Repository = {
    id: number;
    name: string;
    fullName: string;
  };

共享数据获取

• 不仅可以在页面中获取数据，还可以在布局组件中获取数据。

• 数据可以在布局中共享，供不同路由使用。

3. 数据缓存与更新

静态数据

• 默认情况下，所有数据获取都是静态的。

• 行为：在生产构建时，数据会被缓存为静态内容。

动态数据

• 通过 fetch 的 cache: "no-store" 参数，每次请求都重新获取数据。

const response = await fetch("API_ENDPOINT", { cache: "no-store" });

增量静态再生（ISR）

• 使用 next.revalidate 参数设置数据重新验证时间间隔（如 5 秒）。

const response = await fetch("API_ENDPOINT", { next: { revalidate: 5 } });

结合静态和动态数据

• 同一页面可以同时使用静态、动态和 ISR 数据获取策略。

4. 元数据（Metadata）

静态元数据

• 定义方式：通过 metadata 对象定义页面的元数据。

• export const metadata = {
    title: "My Page",
    description: "This is a description",
  };

• 作用：生成 HTML 的 <title> 和 <meta> 标签，优化 SEO。

动态元数据

• 使用 generateMetadata 函数生成动态元数据。

• 接受 params 作为参数。

• export async function generateMetadata({ params }) {
    const post = await fetchPost(params.id);
    return {
      title: post.title,
      description: post.description,
    };
  }

• 支持动态路由段和数据获取逻辑。

重复使用数据获取逻辑

• 数据获取逻辑可在 generateMetadata 和页面组件中重复使用。

总结

• 新特性：

  • 改进的布局支持。

  • 动态与静态数据结合。

  • 更简洁的数据获取方式。

  • 功能更强的元数据 API。

• 灵活性：

  • 同一页面中可以结合静态、动态和 ISR 数据获取策略。

  • 支持布局和页面间的数据共享。

• SEO 改进：

  • 静态和动态元数据的定义更加灵活。