NextJS AppRouter+DatoCMS动态静态生成：首页路由配置难题

问题原因 #

Next.js App Router的路由优先级规则里，根路径/默认对应src/app/page.js，动态路由[slug]的空slug值并不会自动映射到根路由——哪怕你删除了根page.js，系统依然会优先寻找根路由的页面入口，导致你的动态路由逻辑无法处理首页请求。

可行解决方案 #

方案1：复用动态路由逻辑的根page.js #

保留根目录的page.js，让它直接复用动态路由的页面组件和数据获取逻辑，专门拉取DatoCMS中slug为"_"的首页数据：

// src/app/page.js
import { performRequest, PAGE_CONTENT_QUERY } from '@/lib/datocms'; // 替换成你的实际模块路径
import PageRenderer from './[slug]/PageRenderer'; // 复用动态路由的页面渲染组件

export default async function HomePage() {
  const { allPages } = await performRequest(PAGE_CONTENT_QUERY);
  const homePage = allPages.find(page => page.slug === '_');
  
  if (!homePage) return <div>首页未配置</div>;
  
  return <PageRenderer page={homePage} />;
}

// 按需设置静态生成或缓存策略
export const revalidate = 60; // 每60秒重新验证数据

这种方式无需修改动态路由的generateStaticParams代码，逻辑清晰，完全符合App Router的原生路由规则。

方案2：通过Rewrites映射根路由到动态路由 #

在next.config.js中配置路由重写，将根路径/映射到slug为"_"的动态路由页面：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/',
        destination: '/_',
      },
    ];
  },
};

module.exports = nextConfig;

同时修改src/app/[slug]/page.jsx的generateStaticParams，无需将"_"转为空字符串：

export const dynamicParams = false;

export async function generateStaticParams() {
  const { allPages } = await performRequest(PAGE_CONTENT_QUERY);
  return allPages.map(page => ({
    slug: page.slug,
  }));
}

这样静态生成时会生成/_路径的页面，用户访问/时会被重写到该页面，实现首页与其他页面的统一管理。

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