如何在Next.js中将部署时环境变量暴露给客户端（用于页面TITLE前缀）

针对你的需求，核心是要在**部署阶段（而非构建阶段）**将服务器环境变量注入客户端，同时统一处理所有页面的title前缀，无需逐个页面配置。以下分两种Next.js路由模式给出具体实现：

Pages Router（Next.js 12及更早） #

1. 自定义_document.js注入全局变量 #

_document.js是Next.js服务器端渲染HTML的入口，可直接读取服务器环境变量，并将其注入客户端全局作用域：

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    // 读取服务器环境变量（部署时由Docker容器配置）
    const titlePrefix = process.env.TITLE_PREFIX || '默认前缀';
    return { ...initialProps, titlePrefix };
  }

  render() {
    const { titlePrefix } = this.props;
    return (
      <Html>
        <Head>
          {/* 将变量注入客户端window对象 */}
          <script
            dangerouslySetInnerHTML={{
              __html: `window.titlePrefix = "${titlePrefix}";`,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

2. 自定义_app.js统一处理Title前缀 #

在全局_app.js中复用注入的变量，自动为所有页面添加title前缀：

// pages/_app.js
import Head from 'next/head';

function MyApp({ Component, pageProps }) {
  // 客户端直接读取全局变量，服务器端用默认值兜底
  const titlePrefix = typeof window !== 'undefined' ? window.titlePrefix : '默认前缀';

  return (
    <>
      <Head>
        {/* 用页面自定义title（若有）拼接前缀，否则用默认标题 */}
        <title>{`${titlePrefix} - ${Component.title || '我的应用'}`}</title>
      </Head>
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

App Router（Next.js 13+） #

1. 根layout.js注入全局变量+统一配置Title #

App Router中，根layout.js作为服务器组件可直接读取环境变量，同时完成全局变量注入和Title模板配置：

// app/layout.js
import { Metadata } from 'next';

// 全局配置Title模板，自动为所有页面添加前缀
export async function generateMetadata() {
  const titlePrefix = process.env.TITLE_PREFIX || '默认前缀';
  return {
    title: {
      default: `${titlePrefix} - 我的应用`,
      template: `${titlePrefix} - %s`, // %s会被页面自定义title替换
    },
  };
}

export default function RootLayout({ children }) {
  const titlePrefix = process.env.TITLE_PREFIX || '默认前缀';

  return (
    <html lang="zh-CN">
      <head>
        {/* 注入客户端全局变量，供客户端JS使用 */}
        <script
          dangerouslySetInnerHTML={{
            __html: `window.titlePrefix = "${titlePrefix}";`,
          }}
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

客户端使用变量 #

在任意客户端组件中，直接通过window.titlePrefix访问该变量即可，无需额外配置。

方案优势 #

• 无需重新构建：变量值由部署时的服务器环境变量决定，符合Docker多服务器部署的需求
• 全局生效：仅需配置一次，所有页面自动继承Title前缀和全局变量
• 性能无损耗：变量注入在服务器端渲染阶段完成，不增加客户端请求开销

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