Next.js 构建ID的生成与客户端/服务器端访问实践

npm install next-build-id
# 或者
yarn add next-build-id

const nextBuildId = require('next-build-id');

/** @type {import('next').NextConfig} */
const nextConfig = {
  // ... 其他Next.js配置 ...

  // generateBuildId 是一个异步函数，Next.js会在构建时调用它来获取构建ID
  generateBuildId: async () => {
    // nextBuildId() 默认会基于当前git仓库的HEAD commit hash生成ID
    // 也可以传入配置对象，例如 { dir: __dirname }
    return nextBuildId({ dir: __dirname });
  },
};

module.exports = nextConfig;

const nextBuildId = require('next-build-id');

/** @type {import('next').NextConfig} */
const nextConfig = {
  // ... 其他Next.js配置 ...

  generateBuildId: async () => {
    // generateBuildId 依然用于Next.js内部机制
    return nextBuildId({ dir: __dirname });
  },

  // 通过env配置暴露环境变量
  env: {
    // 仅供服务器端访问的构建ID
    // 注意：env配置在next.config.js解析时是同步的，
    // 因此这里使用 nextBuildId.sync() 来确保获取到ID。
    SERVER_BUILD_ID: nextBuildId.sync({ dir: __dirname }),

    // 供客户端和服务器端共同访问的构建ID
    // 必须以 NEXT_PUBLIC_ 开头
    NEXT_PUBLIC_CLIENT_BUILD_ID: nextBuildId.sync({ dir: __dirname }),
  },
};

module.exports = nextConfig;

// pages/api/build-info.js (API路由示例)
export default function handler(req, res) {
  // 访问服务器端专用的构建ID
  const serverBuildId = process.env.SERVER_BUILD_ID;
  // 访问客户端可访问的构建ID（在服务器端也可以访问）
  const clientAccessibleBuildId = process.env.NEXT_PUBLIC_CLIENT_BUILD_ID;

  res.status(200).json({
    serverBuildId: serverBuildId,
    clientAccessibleBuildId: clientAccessibleBuildId,
    message: '构建ID已在服务器端成功访问。',
  });
}

// components/BuildIdDisplay.jsx
import React from 'react';

const BuildIdDisplay = () => {
  // 访问客户端可访问的构建ID
  const buildId = process.env.NEXT_PUBLIC_CLIENT_BUILD_ID;

  // 在浏览器控制台显示构建ID
  if (typeof window !== 'undefined') {
    console.log('Next.js Build ID (Client-side):', buildId);
  }

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', margin: '20px' }}>
      <h3>应用构建信息</h3>
      <p>当前构建ID: <code>{buildId || 'N/A'}</code></p>
      <p>此ID可用于追踪部署版本。</p>
    </div>
  );
};

export default BuildIdDisplay;

// pages/index.js
import BuildIdDisplay from '../components/BuildIdDisplay';

export default function HomePage() {
  return (
    <div>
      <h1>欢迎来到我的Next.js应用</h1>
      <BuildIdDisplay />
    </div>
  );
}