Next.js 13并行路由单个页面metadata不生效，如何解决？

问题根源 #

你用并行路由实现单页面切换，但Next.js并行路由的设计初衷是同时渲染多个路由段（比如侧边栏+主内容区这类多视图场景）。Next.js收集并行路由的metadata时，会默认读取所有并行路由段的metadata，然后采用优先级最高的条目（通常是目录结构中排在最前面的@folder1）——哪怕你在layout里通过条件渲染隐藏了它，它的metadata依然会被优先采用。

解决方案 #

方案一：改用动态路由（推荐，符合Next.js设计逻辑） #

放弃并行路由，改用动态路由实现页面切换，这样每个页面的metadata能正常生效：

1. 调整目录结构为：

   app/
     folder/
       [folderId]/
         page.tsx
   

2. 在[folderId]/page.tsx中根据路由参数渲染对应内容，并导出对应metadata：

   import { Metadata } from 'next';
   
   export async function generateMetadata({ params }: { params: { folderId: string } }): Promise<Metadata> {
     return {
       title: `My title folder ${params.folderId}`,
     };
   }
   
   export default function FolderPage({ params }: { params: { folderId: string } }) {
     // 根据folderId渲染对应内容
     return <div>Content for folder {params.folderId}</div>;
   }
   

方案二：在layout中动态生成metadata #

如果一定要保留当前并行路由结构，可在layout中根据当前激活的路由动态生成metadata：

1. 在layout中通过路由信息判断当前显示的folder，生成对应metadata：

   import { Metadata, usePathname } from 'next';
   
   export async function generateMetadata(): Promise<Metadata> {
     const pathname = usePathname();
     // 根据你的路由切换规则判断激活的folder
     if (pathname.includes('folder2')) {
       return { title: 'My title folder 2' };
     } else if (pathname.includes('folder3')) {
       return { title: 'My title folder 3' };
     }
     return { title: 'My title folder 1' };
   }
   
   export default function Layout({ children, folder1, folder2, folder3 }: {
     children: React.ReactNode;
     folder1: React.ReactNode;
     folder2: React.ReactNode;
     folder3: React.ReactNode;
   }) {
     // 你的条件渲染逻辑
     const activeFolder = getActiveFolder(); // 替换成你的实际判断逻辑
     return (
       <div>
         {activeFolder === 'folder1' && folder1}
         {activeFolder === 'folder2' && folder2}
         {activeFolder === 'folder3' && folder3}
       </div>
     );
   }
   

   注意：这种方式需要确保路由标识能准确对应激活的folder，且会失去单个page独立管理metadata的能力。

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