Next.js 13 /src/app下带Authorization请求如何保留静态路由？

问题原因 #

当在根布局的异步组件（Footer）中使用带TOKEN的fetch请求时，Next.js会默认判定该请求包含敏感服务端信息，无法在构建阶段安全执行，因此将整个根布局标记为动态渲染，导致所有路由都变为服务器端路由（标记为λ）。

解决方案 #

方案1：根布局预获取数据并传递给Footer #

将数据获取逻辑从Footer组件移至根布局中，明确设置缓存策略，让Next.js在构建阶段预获取并缓存数据，再将数据通过props传给Footer（此时Footer无需再是异步组件）。

修改@/app/layout.jsx：

import Footer from '@/components/common/sections/Footer';
import Header from '@/components/common/sections/Header';
import { metaRootLayout } from '@/utils/meta';
import './globals.css';

export const metadata = metaRootLayout();

export default async function RootLayout({ children }) {
  // 根布局中预获取数据，强制缓存确保构建时执行
  const links = await fetch(process.env.URL, {
    headers: { Authorization: process.env.TOKEN },
    cache: 'force-cache' // 核心：告知Next.js构建时缓存该请求结果
  }).then(response => response.json());

  return (
    <html lang="es">
      <body className="body">
        <Header />
        <main>
          {children}
        </main>
        <Footer links={links} />
      </body>
    </html>
  );
};

修改@/components/LinkList.jsx：

// 改为非异步组件，接收父组件传递的links数据
const Footer = ({ links }) => {
  return (
    <ul>
      {links.map((link, index) => (
        <li key={index}>{link.title}</li> // 根据实际数据结构调整渲染逻辑
      ))}
    </ul>
  );
};

export default Footer;

方案2：添加数据重验证（可选） #

如果需要定期更新Footer数据，可在fetch中添加revalidate参数，既保留静态生成特性，又能按指定周期刷新数据：

const links = await fetch(process.env.URL, {
  headers: { Authorization: process.env.TOKEN },
  next: { revalidate: 3600 } // 每3600秒（1小时）重新验证数据
}).then(response => response.json());

关键注意事项 #

• 确保process.env.TOKEN是构建时可访问的环境变量（如存储在.env.production中），而非运行时动态注入的变量，否则构建阶段无法获取TOKEN，仍会触发动态渲染。
• 若API本身限制构建阶段访问（如需要实时数据），则只能保留动态路由，或改用客户端数据获取（但需注意TOKEN不能暴露到客户端，这种情况建议通过内部API代理请求）。

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