编辑“︁Next.js插入路由”︁

= Next.js插入路由 =

== 介绍 ==
'''Next.js插入路由'''（Interpolated Routing）是Next.js框架中基于文件系统的路由机制的扩展功能，允许开发者动态生成路由路径或在运行时插入变量到路由结构中。此功能常用于需要动态URL参数的场景，如用户个人主页、产品详情页等。Next.js通过文件命名约定（如<code>[param]</code>）和API（如<code>useRouter</code>）实现这一特性。

== 核心机制 ==
Next.js的路由系统基于项目目录结构，其中<code>pages</code>文件夹下的文件自动映射为路由。插入路由通过以下两种方式实现：

=== 1. 动态路由文件 ===
在文件名或目录名中使用方括号（如<code>[slug].js</code>）声明动态参数：
<syntaxhighlight lang="javascript">
// pages/blog/[slug].js
export default function BlogPost({ post }) {
  return <h1>{post.title}</h1>;
}

// 示例访问路径：/blog/nextjs-tutorial
</syntaxhighlight>

=== 2. 编程式导航 ===
通过<code>next/router</code>在代码中动态生成路径：
<syntaxhighlight lang="javascript">
import { useRouter } from 'next/router';

function HomePage() {
  const router = useRouter();
  const navigate = () => {
    router.push('/blog/' + encodeURIComponent('nextjs-tutorial'));
  };
  return <button onClick={navigate}>Read Blog</button>;
}
</syntaxhighlight>

== 参数处理 ==
动态路由参数可通过以下方式获取：

{| class="wikitable"
|+ 参数获取方式对比
! 场景 !! 方法 !! 示例
|-
| 页面组件 | <code>useRouter().query</code> | <code>const { slug } = useRouter().query;</code>
|-
| 服务端渲染 | <code>context.params</code> | <code>export async function getServerSideProps({ params }) { ... }</code>
|}

== 嵌套动态路由 ==
通过多级目录实现复杂路由结构：
<mermaid>
graph LR
  pages/
    pages/[category]/
      pages/[category]/[id].js
</mermaid>
示例代码：
<syntaxhighlight lang="javascript">
// pages/shop/[category]/[productId].js
export default function Product() {
  const { category, productId } = useRouter().query;
  return <p>Viewing {productId} in {category}</p>;
}
// 匹配路径：/shop/electronics/42
</syntaxhighlight>

== 实际案例 ==
=== 电商平台商品页 ===
动态生成商品详情页路由：
<syntaxhighlight lang="javascript">
// pages/products/[id].js
export async function getStaticPaths() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();
  const paths = products.map(product => ({
    params: { id: product.id.toString() }
  }));
  return { paths, fallback: false };
}
</syntaxhighlight>

=== 用户仪表盘 ===
多层级路由匹配用户子页面：
<syntaxhighlight lang="javascript">
// pages/dashboard/[userId]/[tab].js
export default function Dashboard() {
  const { userId, tab } = useRouter().query;
  return <div>User {userId}'s {tab} page</div>;
}
// 匹配路径：/dashboard/abc123/settings
</syntaxhighlight>

== 高级配置 ==
=== 正则约束 ===
通过文件名语法限制参数格式（Next.js 9.5+）：
<syntaxhighlight lang="javascript">
// pages/post/[id:\\\\d+].js  // 只匹配数字ID
</syntaxhighlight>

=== 可选捕获 ===
使用双括号实现可选参数：
<syntaxhighlight lang="javascript">
// pages/[[...slug]].js  // 可匹配/docs、/docs/a、/docs/a/b...
</syntaxhighlight>

== 数学表达 ==
路由匹配优先级遵循特定规则。对于路径<code>/a/[b]/[c]</code>和<code>/a/[b]/c</code>，其优先级权重可表示为：
<math>
P = \\sum_{n=1}^{k} \\frac{1}{2^{d_n}}
</math>
其中<math>d_n</math>为动态段深度。

== 注意事项 ==
* 动态路由参数需通过<code>encodeURIComponent</code>处理特殊字符
* 静态生成时需预先定义<code>getStaticPaths</code>
* 客户端导航应使用<code>next/link</code>而非原生<code><a></code>标签

== 总结 ==
Next.js插入路由系统通过文件系统约定和API结合的方式，提供了灵活的URL处理能力。开发者可通过动态段、编程导航和参数约束实现复杂的路由逻辑，同时保持代码的可维护性。此机制是构建现代Web应用动态内容的关键技术之一。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js路由系统]]