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 = {
  // 可选：使用 generateBuildId 自定义 Next.js 自身的构建 ID
  // 这会影响 Next.js 内部的构建 ID，但我们主要通过 env 暴露
  generateBuildId: async () => {
    const buildId = await nextBuildId({ dir: __dirname });
    console.log('Generated Build ID:', buildId); // 在构建时打印 ID
    return buildId;
  },

  // 通过 env 键将构建 ID 暴露为环境变量
  env: {
    // BUILD_ID_ENV 可以在服务器端访问
    BUILD_ID_ENV: (async () => {
      const buildId = await nextBuildId({ dir: __dirname });
      return buildId;
    })(),
    // NEXT_PUBLIC_BUILD_ID_ENV 可以在客户端访问
    NEXT_PUBLIC_BUILD_ID_ENV: (async () => {
      const buildId = await nextBuildId({ dir: __dirname });
      return buildId;
    })(),
  },
};

module.exports = nextConfig;

// pages/index.js (或者任何其他页面文件)

export async function getServerSideProps() {
  const buildId = process.env.BUILD_ID_ENV;
  console.log('Server-side Build ID:', buildId); // 在服务器控制台打印

  return {
    props: {
      serverBuildId: buildId,
    },
  };
}

function HomePage({ serverBuildId }) {
  // ... 页面内容
  return (
    <div>
      <h1>欢迎来到 Next.js 应用</h1>
      <p>服务器端获取的构建 ID: {serverBuildId}</p>
      {/* 客户端构建 ID 将在 useEffect 中打印 */}
    </div>
  );
}

export default HomePage;

// components/BuildIdDisplay.js

import React, { useEffect } from 'react';

const BuildIdDisplay = () => {
  useEffect(() => {
    const clientBuildId = process.env.NEXT_PUBLIC_BUILD_ID_ENV;
    console.log('Client-side Build ID:', clientBuildId); // 在浏览器控制台打印
  }, []);

  return (
    <p>
      客户端获取的构建 ID: {process.env.NEXT_PUBLIC_BUILD_ID_ENV || 'N/A'}
      <br />
      （请检查浏览器控制台获取详细信息）
    </p>
  );
};

export default BuildIdDisplay;

// pages/index.js (继续上面的例子)

import BuildIdDisplay from '../components/BuildIdDisplay';

// ... (getServerSideProps 和 HomePage 组件定义)

function HomePage({ serverBuildId }) {
  return (
    <div>
      <h1>欢迎来到 Next.js 应用</h1>
      <p>服务器端获取的构建 ID: {serverBuildId}</p>
      <BuildIdDisplay /> {/* 在这里使用客户端组件 */}
    </div>
  );
}

export default HomePage;