Next.js嵌套布局实现：为/docs路径配置带Sidebar的子布局

按以下两步操作即可实现无需修改每个docs页面，自动给/docs路径下所有页面继承全局父布局+挂载Sidebar的效果：

步骤1：创建Docs专属嵌套布局组件 #

在你的组件目录下新建/components/Layouts/DocsLayout.js，代码如下：

// 请根据你的实际文件路径调整Sidebar的引入地址
import Sidebar from "../Sidebar";

export default function DocsLayout({ children }) {
  return (
    {/* 可根据你的设计需求自定义外层容器样式 */}
    <div style={{ display: "flex", gap: "2rem", padding: "1.5rem 0" }}>
      {/* 侧边栏固定区域 */}
      <Sidebar />
      {/* 文档内容渲染区域 */}
      <div style={{ flex: 1 }}>
        {children}
      </div>
    </div>
  )
}

步骤2：修改_app.js 自动根据路由匹配布局 #

利用Next.js内置的路由钩子判断当前访问路径，自动给/docs前缀的页面套入Docs布局，修改后的_app.js代码如下：

import { useRouter } from "next/router";
import Layout from "../components/Layouts/Layout";
import DocsLayout from "../components/Layouts/DocsLayout";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  // 匹配所有/docs开头的路由
  const isDocsPage = router.pathname.startsWith("/docs");

  return (
    <Layout>
      {isDocsPage ? (
        <DocsLayout>
          <Component {...pageProps} />
        </DocsLayout>
      ) : (
        <Component {...pageProps} />
      )}
    </Layout>
  );
}

export default MyApp;

补充提醒 #

建议把Sidebar组件内的Link地址修改为绝对路径（前缀加/），避免嵌套路由下跳转异常：

// 修改示例
<Link href="/docs/page1"><a>Page 1</a></Link>

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