Next.js 14中能否在动态路由段下设置静态路由段？

算力阿峰

2026-6-25

在Next.js 14静态导出模式下实现标签Feed路由并获取Tag Slug

实现步骤

1. 按期望创建文件结构

直接搭建你想要的路由层级：

├── app/
│   └── blog/
│       └── [tag]/
│           ├── page.jsx
│           └── feed/
│               └── route.jsx

2. 修改`feed/route.jsx`代码

在App Router的层级结构中，父动态路由段[tag]的参数会自动传递给子路由，无需将feed设为动态段。调整后的代码如下：

// app/blog/[tag]/feed/route.jsx
export async function generateStaticParams() {
  const tags = await getTags();
  // 仅返回tag参数，feed为固定静态段无需配置
  return tags.map(tag => ({
    tag: tag?.slug
  }));
}

export async function GET(request, { params }) {
  // 直接从params中获取当前tag的slug
  const { tag } = params;

  // 此处编写逻辑，根据tag获取对应的feed数据
  const feedData = await getFeedDataByTag(tag);

  return new Response(feedData.xml({ indent: true }), {
    headers: {
      "Content-Type": "application/atom+xml; charset=utf-8"
    }
  });
}

核心说明

参数传递逻辑：子路由feed/route.jsx可直接通过params获取父动态路由[tag]的参数，参数名与动态段文件夹名[tag]一致，即tag。
静态导出适配：generateStaticParams只需返回所有tag的slug数组，Next.js会自动为每个tag生成对应的/blog/[tag]/feed静态文件，完全符合output: "export"的静态导出要求。
冗余代码清理：由于feed是固定静态segment，无需再做参数校验和重定向逻辑，直接处理对应tag的feed数据即可。