Next.js迁移中适配CMS动态生成未知Slug的动态路由问题

问题分析 #

当前代码通过generateStaticParams仅预生成了首页的静态路径，无法适配CMS动态新增的页面Slug，也缺少校验Slug对应页面是否存在的逻辑。我们需要实现：

• 动态匹配任意层级的Slug路径
• 校验页面合法性，不存在则返回404

修改步骤 #

1. 更新page.js，移除固定静态路径生成并传递Slug参数

import { ClientOnly } from './client';
import '../../assets/main.scss';
import { notFound } from 'next/navigation';

// 可选：开启增量静态再生，已访问页面自动静态化，兼顾性能与动态内容时效性
export const revalidate = 60; // 每60秒重新验证页面状态

export default async function Page({ params }) {
  // 【可选：服务端校验】如果CMS提供公开API，优先在服务端校验页面是否存在
  // const fullSlug = params.slug.join('/');
  // const res = await fetch(`https://your-cms-domain/api/check-page?slug=${fullSlug}`);
  // if (!res.ok) {
  //   notFound(); // 直接返回404
  // }

  // 将Slug传递给客户端组件处理
  return <ClientOnly slug={params.slug} />;
}

2. 修改client.js的ClientOnly组件，添加页面存在校验逻辑

'use client';

import { useEffect, useState } from 'react';
import { notFound } from 'next/navigation';
// 替换为你原有React项目中判断页面是否存在的方法
import { checkPageExists } from '../path-to-your-app-utils';

export function ClientOnly({ slug }) {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const validatePage = async () => {
      const fullSlug = slug.join('/');
      // 调用原有项目的页面校验逻辑
      const pageExists = await checkPageExists(fullSlug);
      
      if (!pageExists) {
        notFound(); // 触发Next.js内置的404页面
      }
      setLoading(false);
    };

    validatePage();
  }, [slug]);

  if (loading) {
    return <div>Loading...</div>; // 自定义加载状态
  }

  // 渲染原有React应用，传递Slug参数
  return (
    <div>
      {/* 替换为你原有的React应用入口组件，例如： */}
      {/* <YourReactApp initialSlug={slug} /> */}
    </div>
  );
}

关键说明 #

• 移除generateStaticParams：Next.js的[[...slug]]动态路由会自动匹配任意层级的路径，无需预定义静态路径。
• 服务端vs客户端校验：如果能通过CMS公开API校验页面存在性，优先在服务端处理，可更早返回404，减少无效客户端渲染；若无法获取API，则在客户端复用原有项目的校验逻辑。
• 增量静态再生：添加revalidate属性后，已访问页面会被静态缓存，同时定期重新验证，平衡性能与动态内容的时效性。

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