Next 14 - 不变： headers() 期望有 requestAsyncStorage，但没有可用的。当在generateStaticParams内部调用服务器表达式时

Question

在 Next 14.1.1 中，我在 fetch 函数中使用两种不同的服务器方法，并收到错误：

Invariant: headers() expects to have requestAsyncStorage, none available.

• 方法是从

  getLocale()

  导入

  next-intl/server

  和从

  draftMode()

  导入

  next/headers
• 它们一起创建错误，或者只调用一个时产生错误
• 如果我对它们都发表评论，则获取工作正常
• 当在异步组件内调用 fetch 时，它们工作正常
• 它们仅在内部调用时才会产生错误

  generateStaticParams()

• 构建和运行时都会出现问题

  dev

在获取函数下方：

import qs from "qs";
import { getAuthToken } from "../utils/strapiHelper";
import { draftMode } from "next/headers";
import { getLocale } from "next-intl/server";
import { defaultLocale } from "../i18n";



export async function fetchStrapi(url: URL, params?: {}) {
  const authToken = getAuthToken();
  const headers = {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${authToken}`,
    },
  };
  const locale = (await getLocale()) || defaultLocale; // will not work when fetching client-side
  const { isEnabled } = draftMode();

  const existingSearchParams = qs.parse(url.search, {
    ignoreQueryPrefix: true,
  });
  const searchParams = {
    ...existingSearchParams,
    locale,
    ...(isEnabled && { publicationState: "preview" }),
    ...params
  };

  url.search = qs.stringify(searchParams, { addQueryPrefix: true });

  try {
    const response = await fetch(url, authToken ? { ...headers } : {});
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching data:", error);
    throw error;
  }
}

这里是执行获取操作的组件：

import React from "react";
import Link from "next/link";
import { notFound } from "next/navigation";
import { getArticles, getArticlesBySlug } from "@repo/web/services/articles";

const Article = async ({ params }: { params: { slug: string } }) => {
  const { slug } = params;

  const article = await getArticlesBySlug(slug);
  if (!article || !article?.data?.length) {
    notFound();
  }

  return (
    <>
      <div>{JSON.stringify(article)} </div>
      <Link href={"/"}>Retourner à l'accueil</Link>
    </>
  );
};

export default Article;

export async function generateStaticParams() {
  const slugs = await getArticles({ locale: "all" });

  return slugs.data.map((data) => ({
    slug: data.attributes.article_slug,
    locale: data.attributes.locale,
  }));
}
export const dynamicParams = false;

• 我读到了有关此错误的问题，但没有专门在

  generateStaticParams

的上下文中阅读
• 我尝试在这两个函数中添加“使用服务器”，据我了解，它们已经是服务器端函数，但这并没有解决任何问题。
• 我尝试在 fetchStrapi 函数之外调用我的服务器操作，这让事情变得更糟

Answer 1

Si 在与其他开发人员交谈后，我意识到导致崩溃的两个常量实际上并不是内部生成 url 所需要的，所以我决定在构建时将它们设置为 null。

我可以实现这一目标，感谢

这篇文章

这是固定代码：

generateStaticParams