NextJS如何为子目录设置不同的Document主题与布局

首先明确：不管是Pages Router还是App Router，子目录里的_document.js（Pages Router专属）都不会生效——Next.js规定_document.js只能放在pages根目录，是全局唯一的顶层配置文件，子目录中的同名文件会被直接忽略。

下面分两种路由场景给出解决方案：

一、Pages Router 场景 #

在根目录的pages/_document.js中，通过路由路径判断来动态切换主题或布局：

1. 在getInitialProps中获取当前请求的路径，传递给组件
2. 根据路径是否包含目标子目录（比如/staff），动态修改HTML标签的类名、引入不同样式，或调整顶层结构

示例代码：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    // 保存当前请求的路径
    return { ...initialProps, pathname: ctx.pathname }
  }

  render() {
    const isStaffRoute = this.props.pathname.startsWith('/staff')
    return (
      <Html className={isStaffRoute ? 'staff-theme' : 'default-theme'}>
        <Head>
          {/* 根据路由引入对应样式 */}
          {isStaffRoute && <link rel="stylesheet" href="/staff-theme.css" />}
          {!isStaffRoute && <link rel="stylesheet" href="/default-theme.css" />}
        </Head>
        <body className={isStaffRoute ? 'staff-body' : ''}>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

如果需要对子目录页面的整体布局（非顶层文档结构）做区分，可以在pages/staff目录下创建统一的布局组件，让该目录下的所有页面都引入这个组件，比如：

// pages/staff/StaffLayout.js
export default function StaffLayout({ children }) {
  return (
    <div className="staff-layout-container">
      <header className="staff-header">员工系统头部</header>
      {children}
      <footer className="staff-footer">员工系统底部</footer>
    </div>
  )
}

然后在pages/staff下的每个页面中引入：

// pages/staff/index.js
import StaffLayout from './StaffLayout'

export default function StaffIndex() {
  return (
    <StaffLayout>
      <h1>员工首页</h1>
    </StaffLayout>
  )
}

二、App Router 场景 #

App Router 中没有_document.js，而是用layout.js来实现层级布局控制，子目录的layout.js会自动作用于该目录下的所有页面：

1. 根目录app/layout.js作为全局基础布局
2. 在app/staff目录下创建layout.js，定义该子目录专属的顶层文档结构和样式

示例代码：

• 根布局app/layout.js：

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className="default-theme">
      <head />
      <body>{children}</body>
    </html>
  )
}

• 子目录布局app/staff/layout.js：

export default function StaffLayout({ children }) {
  return (
    <html lang="zh-CN" className="staff-theme">
      <head>
        <link rel="stylesheet" href="/staff-theme.css" />
      </head>
      <body className="staff-body">
        {/* 可以添加子目录专属的头部、导航等 */}
        <nav className="staff-nav">员工系统导航</nav>
        {children}
      </body>
    </html>
  )
}

这样访问/staff下的所有页面时，都会自动使用这个专属布局。

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