如何在Next.js中从package.json获取版本号？

在Next.js里直接用process.env.npm_package_version拿不到版本号，是因为它的环境变量处理逻辑和普通Node项目不一样，不会自动加载npm相关的环境变量。下面给你几个可行的解决办法：

方法一：直接导入package.json #

• 在需要的组件或文件里直接导入package.json：

  import packageJson from '../package.json';
  
  // 直接使用version字段
  console.log(packageJson.version);
  

• 如果遇到ESLint报错，可以在.eslintrc.json里添加规则允许导入package.json：

  {
    "rules": {
      "import/no-unresolved": "off",
      "import/no-self-import": "off"
    }
  }
  

方法二：通过环境变量注入（推荐生产环境用） #

• 手动在项目根目录的.env.local文件里加版本号：

  NEXT_PUBLIC_APP_VERSION=1.0.0
  

• 或者通过npm脚本自动注入，修改package.json里的启动/构建脚本：

  {
    "scripts": {
      "dev": "NEXT_PUBLIC_APP_VERSION=$(node -p require('./package.json').version) next dev",
      "build": "NEXT_PUBLIC_APP_VERSION=$(node -p require('./package.json').version) next build",
      "start": "NEXT_PUBLIC_APP_VERSION=$(node -p require('./package.json').version) next start"
    }
  }
  

• 之后在代码里用process.env.NEXT_PUBLIC_APP_VERSION就能拿到版本号：

  console.log(process.env.NEXT_PUBLIC_APP_VERSION);
  

• 注意：前缀NEXT_PUBLIC_必须加，这样环境变量才会暴露给客户端代码；如果只在服务端用，可以去掉这个前缀。

方法三：服务端/静态生成场景用getServerSideProps或getStaticProps #

• 在页面组件里通过服务端函数读取package.json，再传给组件：

  export async function getServerSideProps() {
    const packageJson = require('../package.json');
    return {
      props: {
        appVersion: packageJson.version
      }
    };
  }
  
  function HomePage({ appVersion }) {
    return <div>当前版本：{appVersion}</div>;
  }
  
  export default HomePage;
  

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