Next.js13迁移：generateStaticParams调用createServerClient报错求助

错误原因 #

Error: Invariant: Method expects to have requestAsyncStorage, none available 是因为你在generateStaticParams函数里调用了createServerClient，而这个函数依赖next/headers和next/cookies提供的请求上下文——但generateStaticParams是在**静态站点生成(SSG)**阶段运行的，此时没有活跃的请求上下文，无法获取headers或cookies。

解决方案 #

方案1：改用服务端渲染(SSR)（推荐） #

如果用户数据需要动态更新，直接在Page组件内获取数据（App Router中异步Page组件默认是SSR），同时修正路由结构以匹配mydomain.com/username-example的URL需求：

1. 调整路由：将页面文件放在app/[username]/page.tsx，这样URL中的动态部分会映射到params.username。
2. 修改Page组件代码：

import * as React from "react";
import { createServerClient } from "../../lib/supabase-server";

export default async function Page({
  params,
}: {
  params: { username: string };
}) {
  const supabase = createServerClient();
  // 根据username查询用户详情
  const { data: user } = await supabase
    .from("user")
    .select("*")
    .eq("username", params.username)
    .single();

  if (!user) {
    return <div>用户不存在</div>;
  }

  return <div>欢迎，{user.username}</div>;
}

3. 移除generateStaticParams，SSR模式下不需要预生成静态页面。

方案2：坚持使用静态生成(SSG) #

如果必须预生成所有用户页面，需要创建不依赖请求上下文的Supabase客户端：

1. 新建静态专用客户端文件lib/supabase-static.ts：

import { createClient } from "@supabase/supabase-js";
import { Database } from "../ts/models/database-types";

export const createStaticClient = () =>
  createClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_PROJECT_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_PUBLIC!
  );

2. 修改页面代码，在generateStaticParams中使用静态客户端：

import * as React from "react";
import { createServerClient } from "../../lib/supabase-server";
import { createStaticClient } from "../../lib/supabase-static";

export async function generateStaticParams() {
  const supabase = createStaticClient();
  const { data: profiles } = await supabase.from("user").select("username");

  if (!profiles) {
    throw new Error("No profiles found");
  }

  return profiles.map((profile) => ({
    username: profile.username,
  }));
}

export default async function Page({
  params,
}: {
  params: { username: string };
}) {
  const supabase = createServerClient();
  const { data: user } = await supabase
    .from("user")
    .select("*")
    .eq("username", params.username)
    .single();

  if (!user) {
    return <div>用户不存在</div>;
  }

  return <div>欢迎，{user.username}</div>;
}

3. 同样需要将路由调整为app/[username]/page.tsx以匹配目标URL结构。

额外注意事项 #

• 确保.env.local中已正确配置NEXT_PUBLIC_SUPABASE_PROJECT_URL和NEXT_PUBLIC_SUPABASE_ANON_PUBLIC环境变量。
• App Router中，headers()和cookies()只能在服务端组件的顶层或异步函数中调用，不能用于客户端组件或generateStaticParams这类静态生成函数。

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