首页 › Next.js论坛 › Next.js路由段配置选项笔记

积极急 發表於 2025-11-3 21:27:00

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

<h2 id="前言">前言</h2>
<p>大家好，我是曦远。</p>
<p>本来是想发昨晚写好的 starblog 管理后台重构文章的</p>
<p>结果打开 blog 才发现忘记提交了😂</p>
<p>所以写一篇新的吧</p>
<p>正好最近正在大量使用 Next.js</p>
<p>我发现部署后的首次渲染很慢，才意识到「预热」这个问题</p>
<p>当然这是后话了</p>
<p>这个框架里有大量的官方约定</p>
<p>这些在官方文档里都有的，就是比较分散，本文主要是概括一下这些约定</p>
<p>Next.js框架更新得很快，不一样的地方以官方文档为主。</p>
<h2 id="缓存和渲染相关">缓存和渲染相关</h2>
<pre><code class="language-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; // 不允许动态参数
</code></pre>
<h2 id="运行时配置">运行时配置</h2>
<pre><code class="language-js">// 指定运行时环境
export const runtime = 'nodejs';    // Node.js 运行时（默认）
export const runtime = 'edge';      // Edge 运行时

// 设置最大执行时间（秒）
export const maxDuration = 30; // 最多执行30秒
</code></pre>
<h2 id="获取数据相关">获取数据相关</h2>
<pre><code class="language-js">// 控制 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'; // 强制不缓存
</code></pre>
<h2 id="元数据和seo">元数据和SEO</h2>
<h3 id="元数据">元数据</h3>
<p>动态生成元数据</p>
<pre><code class="language-js">import type { Metadata } from 'next'

export async function generateMetadata({ params }: { params: { slug: string } }): Promise&lt;Metadata&gt; {
// 根据动态参数获取数据
const post = await getPost(params.slug)

return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: ,
    },
}
}
</code></pre>
<p>定义静态元数据</p>
<pre><code class="language-js">// 静态元数据
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',
},
}
</code></pre>
<h4 id="使用场景">使用场景</h4>
<p>静态 Metadata 适用于：</p>
<ul>
<li>内容固定的页面（如关于我们、联系我们）</li>
<li>不需要根据路由参数变化的页面</li>
<li>简单的静态页面</li>
</ul>
<p>动态 Metadata 适用于：</p>
<ul>
<li>博客文章详情页（根据文章 slug 获取标题、描述）</li>
<li>产品详情页（根据产品 ID 获取信息）</li>
<li>用户个人资料页（根据用户 ID 获取信息）</li>
<li>任何需要根据路由参数或外部数据动态生成 metadata 的页面</li>
</ul>
<h3 id="静态参数">静态参数</h3>
<pre><code class="language-js">// 生成静态参数（用于动态路由）
export async function generateStaticParams() {
return [
    { slug: 'post-1' },
    { slug: 'post-2' },
];
}
</code></pre>
<h2 id="常用组合示例">常用组合示例</h2>
<h3 id="完全静态页面">完全静态页面</h3>
<pre><code class="language-js">export const dynamic = 'force-static';
export const revalidate = false;
</code></pre>
<h3 id="实时动态页面">实时动态页面</h3>
<pre><code class="language-js">export const dynamic = 'force-dynamic';
export const revalidate = 0;
</code></pre>
<h3 id="定时更新页面">定时更新页面</h3>
<pre><code class="language-js">export const revalidate = 3600; // 每小时更新一次
</code></pre>
<h3 id="edge-运行时优化">Edge 运行时优化</h3>
<pre><code class="language-js">export const runtime = 'edge';
export const dynamic = 'force-dynamic';
</code></pre>
<h3 id="api-路由配置">API 路由配置</h3>
<pre><code class="language-js">// 在 API 路由中也可以使用
export const runtime = 'edge';
export const maxDuration = 10;
</code></pre>
<h2 id="使用场景建议">使用场景建议</h2>
<table>
<thead>
<tr>
<th>配置</th>
<th><strong>适用场景</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>revalidate = 0</td>
<td>实时数据展示，如股票价格、聊天应用</td>
</tr>
<tr>
<td>revalidate = 60</td>
<td>定期更新的内容，如新闻、博客</td>
</tr>
<tr>
<td>dynamic = 'force-static'</td>
<td>完全静态的页面，如关于我们</td>
</tr>
<tr>
<td>dynamic = 'force-dynamic'</td>
<td>个性化内容，如用户仪表板</td>
</tr>
<tr>
<td>runtime = 'edge'</td>
<td>需要低延迟的全球分发</td>
</tr>
<tr>
<td>fetchCache = 'force-no-store'</td>
<td>敏感数据，不允许缓存</td>
</tr>
</tbody>
</table>
<h2 id="注意事项">注意事项</h2>
<ol>
<li>只能在页面或布局文件中使用 ：这些配置只在 page.tsx 、 layout.tsx 或 route.ts 文件中有效</li>
<li>这些配置选项只能在 Server Component Pages、Layouts 或 Route Handlers 中使用</li>
<li>必须是具名导出 ：必须使用 export const 语法</li>
<li>配置值必须是 静态可分析的 （例如 revalidate = 600 有效，但 revalidate = 60 * 10 无效）</li>
<li>类型安全 ：TypeScript 会检查这些配置的类型</li>
<li>优先级 ：子路由的配置会覆盖父路由的配置</li>
</ol>
<p>这些配置选项让 Next.js 能够精确控制每个页面的渲染和缓存行为，是 App Router 架构的核心特性之一</p>
<h2 id="官方文档">官方文档</h2>
<p>Route Segment Config（路由段配置）</p>
<ul>
<li>最新版本 ： https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config</li>
<li>Next.js 14 版本 ： https://nextjs.org/docs/14/app/api-reference/file-conventions/route-segment-config</li>
</ul>
<h3 id="相关文档页面">相关文档页面</h3>
<ol>
<li>
<p>Dynamic Routes（动态路由）</p>
<ul>
<li>https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes</li>
</ul>
</li>
<li>
<p>Data Fetching and Caching（数据获取和缓存）</p>
<ul>
<li>https://nextjs.org/docs/app/building-your-application/data-fetching</li>
</ul>
</li>
<li>
<p>Rendering（渲染）</p>
<ul>
<li>https://nextjs.org/docs/app/building-your-application/rendering</li>
</ul>
</li>
</ol>


</div>
<div id="MySignature" role="contentinfo">
    微信公众号：「程序设计实验室」
专注于互联网热门新技术探索与团队敏捷开发实践，包括架构设计、机器学习与数据分析算法、移动端开发、Linux、Web前后端开发等，欢迎一起探讨技术，分享学习实践经验。<br><br>
来源：https://www.cnblogs.com/deali/p/19188353

查看完整版本: Next.js路由段配置选项笔记