如何在Next.js嵌套布局中实现递归式标题模板链式拼接？

问题背景 #

我正在开发一个采用嵌套文件结构的Next.js项目，希望每个布局层级递归添加标题前缀，最终标题为当前页面所有上级布局标题的组合。项目文件夹结构如下：

├── app
│   ├── layout.tsx     // 预期标题："Studio"      
│   ├── project-review
│   │   ├── layout.tsx     // 预期标题："Studio - Project Review"  
│   │   ├── history
│   │   │   └── page.tsx       // 预期标题："Studio - Project Review - History"
│   │   └── page.tsx
│   └── page.tsx

最初尝试用静态metadata配置：

// app/layout.tsx
export const metadata = {
  title: { template: 'Studio - %s', default: 'Studio' },
};

// app/project-review/layout.tsx
export const metadata = {
  title: { template: 'Project Review - %s', default: 'Project reviews' },
};

// app/project-review/history/page.tsx
export const metadata = {
  title: { default: 'History' },
};

但实际显示标题为「Project Review - History」，而非预期的「Studio - Project Review - History」——子布局的metadata会直接替换父级的标题模板，无法自动链式拼接。

原因分析 #

Next.js的静态metadata是替换式合并：子布局的title.template会覆盖父级的模板，而非追加或链式继承。因此无法通过静态配置实现递归标题前缀的需求。

解决方案 #

方案1：使用generateMetadata动态拼接（推荐，SEO友好） #

Next.js 13+ 提供的generateMetadata函数支持异步获取父级元数据，以此实现递归拼接标题模板。

根布局（app/layout.tsx）

import type { Metadata } from 'next';

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: {
      default: 'Studio',
      template: '%s' // 仅保留占位符，让子级扩展
    }
  };
}

子布局（app/project-review/layout.tsx）

import type { Metadata, ResolvingMetadata } from 'next';

export async function generateMetadata(
  _: unknown,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // 获取父级的默认标题或模板内容
  const parentTitle = (await parent).title?.default || '';
  const sectionTitle = 'Project Review';
  
  return {
    title: {
      default: `${parentTitle} - ${sectionTitle}`, // 当前布局的默认标题
      template: `${parentTitle} - ${sectionTitle} - %s` // 传递给子页面的模板
    }
  };
}

子页面（app/project-review/history/page.tsx）

import type { Metadata, ResolvingMetadata } from 'next';

export async function generateMetadata(
  _: unknown,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const parentTemplate = (await parent).title?.template || '';
  const pageTitle = 'History';
  
  // 替换父级模板的占位符，生成最终标题
  return {
    title: parentTemplate.replace('%s', pageTitle)
  };
}

这种方案完全基于Next.js原生元数据体系，支持服务端渲染，对SEO友好，且能自动继承上级布局的标题片段。

方案2：自定义React上下文管理标题（客户端侧） #

如果需要更灵活的动态标题控制（比如路由切换时的动画效果），可以通过React上下文手动管理标题片段的添加/移除。

创建标题上下文（app/TitleContext.tsx）

'use client';

import { createContext, useContext, useMemo, useState } from 'react';

type TitleContextType = {
  addTitleSegment: (segment: string) => void;
  removeTitleSegment: (segment: string) => void;
  currentSegments: string[];
};

const TitleContext = createContext<TitleContextType | undefined>(undefined);

export function TitleProvider({ children }: { children: React.ReactNode }) {
  const [segments, setSegments] = useState<string[]>(['Studio']);

  const addTitleSegment = (segment: string) => {
    if (!segments.includes(segment)) {
      setSegments([...segments, segment]);
    }
  };

  const removeTitleSegment = (segment: string) => {
    setSegments(segments.filter(s => s !== segment));
  };

  const value = useMemo(() => ({
    addTitleSegment,
    removeTitleSegment,
    currentSegments: segments
  }), [segments]);

  return (
    <TitleContext.Provider value={value}>
      {children}
    </TitleContext.Provider>
  );
}

export function useTitle() {
  const context = useContext(TitleContext);
  if (!context) {
    throw new Error('useTitle must be used within a TitleProvider');
  }
  return context;
}

根布局集成上下文（app/layout.tsx）

'use client';

import { TitleProvider, useTitle } from './TitleContext';
import { useEffect } from 'react';

function RootContent({ children }: { children: React.ReactNode }) {
  const { currentSegments } = useTitle();

  // 监听标题片段变化，更新document.title
  useEffect(() => {
    document.title = currentSegments.join(' - ');
  }, [currentSegments]);

  return children;
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <TitleProvider>
          <RootContent>{children}</RootContent>
        </TitleProvider>
      </body>
    </html>
  );
}

子布局添加标题片段（app/project-review/layout.tsx）

'use client';

import { useTitle } from '../TitleContext';
import { useEffect } from 'react';

export default function ProjectReviewLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { addTitleSegment, removeTitleSegment } = useTitle();
  const segment = 'Project Review';

  // 进入布局时添加片段，离开时移除
  useEffect(() => {
    addTitleSegment(segment);
    return () => removeTitleSegment(segment);
  }, [addTitleSegment, removeTitleSegment, segment]);

  return <div>{children}</div>;
}

子页面添加标题片段（app/project-review/history/page.tsx）

'use client';

import { useTitle } from '../../TitleContext';
import { useEffect } from 'react';

export default function HistoryPage() {
  const { addTitleSegment, removeTitleSegment } = useTitle();
  const segment = 'History';

  useEffect(() => {
    addTitleSegment(segment);
    return () => removeTitleSegment(segment);
  }, [addTitleSegment, removeTitleSegment, segment]);

  return <div>History Page</div>;
}

这种方案适合客户端交互场景，但需要注意：由于标题是客户端侧更新，首次渲染的标题需要额外处理（比如在根布局中设置初始静态标题），避免SEO影响。

内容的提问来源于stack exchange，提问作者Jakub Málek