面试题：Next.js嵌套路由在单页应用中如何进行基本布局设置

Question

在Next.js的单页应用场景下，使用嵌套路由时，怎样基于`layout.js`文件实现页面的基本布局，比如头部、侧边栏和底部的固定布局设置，请描述实现思路及关键代码片段。

Answer 1

实现思路

1. 创建布局文件：在app目录下，按照嵌套路由结构创建layout.js文件。此文件将作为共享布局的容器。
2. 设计布局结构：在layout.js中设计页面的基本布局，包括头部、侧边栏和底部。可使用CSS框架（如Tailwind CSS、Styled Components等）来进行样式设计。
3. 设置固定布局：通过CSS属性position: fixed或sticky来固定头部、侧边栏和底部的位置。
4. 渲染子路由内容：使用{children}来渲染嵌套路由中的子页面内容，确保子页面能在布局内正确显示。

关键代码片段

1. 创建基本layout.js结构

import React from 'react';

export default function Layout({ children }) {
  return (
    <div>
      {/* 头部 */}
      <header>
        <h1>页面头部</h1>
      </header>
      {/* 侧边栏 */}
      <aside>
        <ul>
          <li>侧边栏项目1</li>
          <li>侧边栏项目2</li>
        </ul>
      </aside>
      {/* 子页面内容 */}
      {children}
      {/* 底部 */}
      <footer>
        <p>页面底部</p>
      </footer>
    </div>
  );
}

2. 使用CSS设置固定布局（以Tailwind CSS为例）

import React from 'react';

export default function Layout({ children }) {
  return (
    <div className="relative min-h-screen">
      {/* 头部 */}
      <header className="fixed top-0 left-0 w-full bg-gray-200 p-4">
        <h1 className="text-xl font-bold">页面头部</h1>
      </header>
      {/* 侧边栏 */}
      <aside className="fixed left-0 top-16 bottom-0 w-64 bg-gray-300 p-4">
        <ul>
          <li className="my-2">侧边栏项目1</li>
          <li className="my-2">侧边栏项目2</li>
        </ul>
      </aside>
      {/* 子页面内容 */}
      <main className="ml-64 pt-16">{children}</main>
      {/* 底部 */}
      <footer className="fixed bottom-0 left-0 w-full bg-gray-200 p-4">
        <p className="text-center">页面底部</p>
      </footer>
    </div>
  );
}

在上述代码中，通过fixed定位设置了头部和底部固定在页面的顶部和底部，侧边栏固定在左侧。main部分通过ml-64（预留侧边栏宽度）和pt-16（预留头部高度）确保内容不被覆盖。