如何读取NextJS的Build ID并在浏览器控制台输出？

方法1：环境变量注入（推荐） #

在next.config.js中配置Build ID时，直接将其注入到前端可访问的环境变量：

// next.config.js
const nextBuildId = require('next-build-id');

module.exports = {
  generateBuildId: async () => {
    const buildId = await nextBuildId({ dir: __dirname });
    process.env.NEXT_PUBLIC_BUILD_ID = buildId;
    return buildId;
  },
};

在客户端组件中直接打印到控制台：

// 客户端组件（如app/page.js 或 pages/index.js）
'use client';

console.log('Build ID:', process.env.NEXT_PUBLIC_BUILD_ID);

方法2：服务器组件传递给客户端组件 #

通过服务器组件获取Build ID，再传递给客户端组件使用：

1. 服务器组件中获取Build ID：

// app/page.js（服务器组件）
import { getBuildId } from 'next/config';
import ClientLogComponent from './ClientLogComponent';

export default function Home() {
  const buildId = getBuildId();
  return <ClientLogComponent buildId={buildId} />;
}

2. 客户端组件接收并打印：

// app/ClientLogComponent.js（客户端组件）
'use client';

export default function ClientLogComponent({ buildId }) {
  console.log('Build ID:', buildId);
  return <div>Build ID已输出到控制台</div>;
}

方法3：静态文件读取 #

利用Next.js生成的.next/BUILD_ID文件，构建时复制到公共目录后由客户端读取：

1. 修改package.json的构建脚本，添加文件复制步骤：

{
  "scripts": {
    "build": "next build && cp .next/BUILD_ID public/build-id.txt"
  }
}

2. 客户端组件中通过fetch读取并打印：

// 客户端组件
'use client';

import { useEffect } from 'react';

export default function Home() {
  useEffect(() => {
    fetch('/build-id.txt')
      .then(res => res.text())
      .then(buildId => console.log('Build ID:', buildId.trim()));
  }, []);
  
  return <div>Build ID已输出到控制台</div>;
}

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