Next.js中如何从package.json获取数据并在.env中调用？

.env文件本身无法直接读取package.json的数据，但可以通过两种方式将package.json里的版本、名称等信息注入到环境变量中，实现你想要的process.env.APP_VERSION和process.env.APP_NAME调用方式：

方法1：通过Node脚本生成.env.local文件 #

1. 在项目根目录创建一个set-env.js脚本：

const fs = require('fs');
const pkg = require('./package.json');

// 生成.env.local内容
const envContent = `APP_VERSION=${pkg.version}\nAPP_NAME=${pkg.name}\n`;
fs.writeFileSync('.env.local', envContent);

2. 修改package.json里的脚本，让启动/构建前自动执行该脚本：

"scripts": {
  "predev": "node set-env.js",
  "dev": "next dev",
  "prebuild": "node set-env.js",
  "build": "next build"
}

predev和prebuild是npm的预钩子脚本，会在对应的dev、build命令执行前自动运行，生成包含package.json数据的.env.local文件。

方法2：通过next.config.js直接配置环境变量 #

在next.config.js中导入package.json，直接将数据注入到Next.js的环境变量配置里：

const packageJson = require('./package.json');

/** @type {import('next').NextConfig} */
const nextConfig = {
  env: {
    APP_VERSION: packageJson.version,
    APP_NAME: packageJson.name,
  },
};

module.exports = nextConfig;

这种方式不需要额外脚本，Next.js会在构建过程中自动将这些变量注入到process.env中，客户端和服务端组件都可以直接调用。

使用方式 #

完成上述配置后，就可以在项目中直接使用：

const appVersion = process.env.APP_VERSION;
const appName = process.env.APP_NAME;

注意：如果是在客户端组件中使用，这些变量会被打包到前端代码里，不要用来存储敏感信息。

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