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

最新推荐文章于 2025-08-06 11:26:17 发布

卓大胖_

最新推荐文章于 2025-08-06 11:26:17 发布

阅读量1.1k

点赞数 17

CC 4.0 BY-SA版权

分类专栏： Next.js新手文章标签： javascript 笔记开发语言

本文链接：https://blog.csdn.net/chenzhuochen7788/article/details/143876698

Next.js新手专栏收录该内容

8 篇文章

订阅专栏

简介

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