基于外部JSON的Next.js 13动态路由实现方案问询

需求可行性 #

完全可行。Next.js 13的App Router支持动态路由捕获和增量静态再生（ISR），可以实现CMS路由更新后无需开发者介入、无需手动部署，自动同步到前端路由体系。

具体实现步骤 #

1. 搭建通用路由捕获入口 #

在App Router目录下创建最顶层的动态路由捕获页面，用来承接所有未匹配到静态路由的请求：

• 创建app/[...catchAll]/page.tsx文件，这个[...catchAll]是Next.js的通配符动态路由，会匹配所有层级的URL路径。

2. 从CMS拉取路由数据并预生成静态路径 #

在page.tsx中使用generateStaticParams函数，提前拉取CMS的路由数据，生成对应静态路径，同时配置缓存刷新策略实现自动更新：

export async function generateStaticParams() {
  // 调用CMS接口获取路由配置
  const res = await fetch('你的CMS路由接口地址', { 
    next: { revalidate: 60 } // 每60秒自动重新验证缓存，可根据需求调整
  });
  const { routes } = await res.json();

  // 将CMS返回的actual_url转换为catchAll需要的参数格式
  return routes.map(route => {
    if (route.actual_url === '/') {
      return { catchAll: [] }; // 根路径对应空数组
    }
    // 把路径拆分为数组，比如/projects/project-one拆成['projects', 'project-one']
    return { catchAll: route.actual_url.slice(1).split('/') };
  });
}

3. 匹配路由并渲染对应内容 #

在页面组件中，根据当前路由参数匹配CMS路由数据，拉取对应内容并渲染；如果匹配不到则返回404：

export default async function CatchAllPage({ params }: { params: { catchAll: string[] } }) {
  // 拼接当前请求的实际URL
  const actualUrl = params.catchAll.length ? `/${params.catchAll.join('/')}` : '/';

  // 再次拉取路由数据（利用Next.js缓存，不会重复请求）
  const res = await fetch('你的CMS路由接口地址', { next: { revalidate: 60 } });
  const { routes } = await res.json();

  // 匹配对应的路由配置
  const matchedRoute = routes.find(route => route.actual_url === actualUrl);
  if (!matchedRoute) {
    return <div className="text-center py-10">404 - 页面不存在</div>;
  }

  // 根据路由的slug拉取对应页面内容（示例：假设CMS提供内容接口）
  const contentRes = await fetch(
    `你的CMS内容接口地址?slug=${matchedRoute.slug}`, 
    { next: { revalidate: 60 } }
  );
  const content = await contentRes.json();

  // 渲染内容（这里假设返回的是HTML字符串，按需调整）
  return <div dangerouslySetInnerHTML={{ __html: content.contentHtml }} />;
}

4. 实现CMS更新后的实时同步（可选） #

如果需要CMS路由更新后立即生效，而不是等待缓存刷新，可以通过Next.js的手动重新验证API实现：

• 创建app/api/revalidate/route.ts：

import { NextResponse } from 'next/server';
import { revalidatePath } from 'next/cache';

export async function POST(request: Request) {
  // 从CMS的webhook请求中获取更新的路径
  const { path } = await request.json();
  
  // 触发对应路径的重新验证
  revalidatePath(path);
  
  return NextResponse.json({ revalidated: true, timestamp: Date.now() });
}

• 在CMS后台配置webhook：当路由更新完成后，调用上述API接口，传入更新的actual_url路径，即可立即触发该页面的静态再生。

最终文件夹结构 #

app/
├── [...catchAll]/
│   └── page.tsx       # 通用路由捕获与内容渲染页面
└── api/
    └── revalidate/
        └── route.ts   # 手动触发缓存刷新的API路由

内容的提问来源于stack exchange，提问作者Kdigidydawg