Next.js路由段配置选项笔记

技术分享 4个月前 (11-04) 0 999+

关注

前言

大家好，我是曦远。

本来是想发昨晚写好的 starblog 管理后台重构文章的

结果打开 blog 才发现忘记提交了😂

所以写一篇新的吧

正好最近正在大量使用 Next.js

我发现部署后的首次渲染很慢，才意识到「预热」这个问题

当然这是后话了

这个框架里有大量的官方约定

这些在官方文档里都有的，就是比较分散，本文主要是概括一下这些约定

Next.js框架更新得很快，不一样的地方以官方文档为主。

缓存和渲染相关

// 控制页面重新验证的时间间隔（秒） export const revalidate = 60; // 60秒后重新验证 export const revalidate = 0;  // 禁用缓存 export const revalidate = false; // 永久缓存  // 控制页面的渲染模式 export const dynamic = 'auto';          // 默认，自动选择 export const dynamic = 'force-dynamic'; // 强制动态渲染 export const dynamic = 'force-static';  // 强制静态渲染 export const dynamic = 'error';         // 如果使用动态函数则报错  // 控制动态段的行为 export const dynamicParams = true;  // 允许动态参数（默认） export const dynamicParams = false; // 不允许动态参数

运行时配置

// 指定运行时环境 export const runtime = 'nodejs';    // Node.js 运行时（默认） export const runtime = 'edge';      // Edge 运行时  // 设置最大执行时间（秒） export const maxDuration = 30; // 最多执行30秒

获取数据相关

// 控制 fetch 请求的缓存行为 export const fetchCache = 'auto';           // 默认缓存行为 export const fetchCache = 'default-cache';  // 默认缓存 export const fetchCache = 'only-cache';     // 只使用缓存 export const fetchCache = 'force-cache';    // 强制缓存 export const fetchCache = 'default-no-store'; // 默认不缓存 export const fetchCache = 'only-no-store';  // 只允许不缓存 export const fetchCache = 'force-no-store'; // 强制不缓存

元数据和SEO

元数据

动态生成元数据

import type { Metadata } from 'next'  export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {   // 根据动态参数获取数据   const post = await getPost(params.slug)      return {     title: post.title,     description: post.description,     openGraph: {       title: post.title,       description: post.description,       images: [post.image],     },   } }

定义静态元数据

// 静态元数据 export const metadata: Metadata = {   title: 'My Page',   description: 'This is my page description',   keywords: ['next.js', 'react', 'typescript'],   openGraph: {     title: 'My Page',     description: 'This is my page description',   }, }

使用场景

静态 Metadata 适用于：

内容固定的页面（如关于我们、联系我们）
不需要根据路由参数变化的页面
简单的静态页面

动态 Metadata 适用于：

博客文章详情页（根据文章 slug 获取标题、描述）
产品详情页（根据产品 ID 获取信息）
用户个人资料页（根据用户 ID 获取信息）
任何需要根据路由参数或外部数据动态生成 metadata 的页面

静态参数

// 生成静态参数（用于动态路由） export async function generateStaticParams() {   return [     { slug: 'post-1' },     { slug: 'post-2' },   ]; }

常用组合示例

完全静态页面

export const dynamic = 'force-static'; export const revalidate = false;

实时动态页面

export const dynamic = 'force-dynamic'; export const revalidate = 0;

定时更新页面

export const revalidate = 3600; // 每小时更新一次

Edge 运行时优化

export const runtime = 'edge'; export const dynamic = 'force-dynamic';

API 路由配置

// 在 API 路由中也可以使用 export const runtime = 'edge'; export const maxDuration = 10;

使用场景建议

配置	适用场景
revalidate = 0	实时数据展示，如股票价格、聊天应用
revalidate = 60	定期更新的内容，如新闻、博客
dynamic = 'force-static'	完全静态的页面，如关于我们
dynamic = 'force-dynamic'	个性化内容，如用户仪表板
runtime = 'edge'	需要低延迟的全球分发
fetchCache = 'force-no-store'	敏感数据，不允许缓存