Next.js 13中实现类似publicRuntimeConfig的动态API端点注入方案

针对你提出的需求——同一构建产物适配多环境、非废弃特性、无网络开销，推荐采用Server Component传递运行时配置到Client Component的方案，完全匹配你的要求：

核心思路 #

Next.js 13 App Router中，Server Component可以直接读取非NEXT_PUBLIC_前缀的环境变量（运行时读取，无需构建注入），然后通过props将配置传递给客户端的ApolloWrapper组件，既避免了构建时硬编码，也不需要额外API请求。

具体实现步骤 #

1. 修改RootLayout（Server Component）

在根布局中读取服务器端环境变量，将GraphQL端点作为props传给ApolloWrapper：

// src/app/layout.tsx
import type { Metadata } from "next";
import { Rubik } from "next/font/google";
import { Providers } from "./providers";
import { ApolloWrapper } from "@/lib/apolloWrapper";

const rubik = Rubik({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Lifefication",
  description: "Application to track habits and goals",
};

// 直接读取服务器端环境变量（无需NEXT_PUBLIC前缀）
const GRAPHQL_ENDPOINT = process.env.GRAPHQL_ENDPOINT || "http://example.com/not-defined";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={rubik.className}>
        {/* 将端点作为props传递给客户端组件 */}
        <ApolloWrapper graphqlEndpoint={GRAPHQL_ENDPOINT}>
          <Providers>{children}</Providers>
        </ApolloWrapper>
      </body>
    </html>
  );
}

2. 修改ApolloWrapper（Client Component）

接收传入的端点配置，替换原有的硬编码变量：

// src/lib/apolloWrapper.tsx
"use client";

import { ApolloLink, HttpLink } from "@apollo/client";
import {
  NextSSRApolloClient,
  ApolloNextAppProvider,
  NextSSRInMemoryCache,
  SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";

// 接收props中的端点配置
function makeClient(graphqlEndpoint: string) {
  const httpLink = new HttpLink({ uri: graphqlEndpoint });

  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache(),
    link: typeof window === "undefined"
      ? ApolloLink.from([
          new SSRMultipartLink({ stripDefer: true }),
          httpLink,
        ])
      : httpLink,
  });
}

export function ApolloWrapper({ 
  children, 
  graphqlEndpoint 
}: React.PropsWithChildren<{ graphqlEndpoint: string }>) {
  return (
    <ApolloNextAppProvider makeClient={() => makeClient(graphqlEndpoint)}>
      {children}
    </ApolloNextAppProvider>
  );
}

方案优势 #

• 动态适配多环境：Server Component在运行时读取环境变量，同一构建产物部署到不同环境时，只需修改对应环境的GRAPHQL_ENDPOINT变量即可，完全符合12要素原则。
• 非废弃特性：基于App Router的Server/Client Component props传递机制，是Next.js官方推荐的组件间数据传递方式。
• 无网络开销：直接通过组件props传递配置，不需要额外的内部API请求或客户端网络请求。

注意事项 #

• 确保部署环境（如Vercel、Docker、K8s等）中已正确设置GRAPHQL_ENDPOINT环境变量，且该变量对服务器端可见（无需NEXT_PUBLIC前缀）。
• 若需要在客户端其他组件中访问该端点，可通过React Context封装后传递，避免重复props drilling。

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