如何在Next.js应用public文件夹的自定义JS文件中使用环境变量

Next.js默认不会对public目录下的静态文件做任何编译处理，因此无法直接在public下的js文件中注入环境变量，你可以通过以下两种方案实现需求：

方案1：预构建脚本输出到public目录（适合构建时固定环境变量的场景） #

步骤1：调整源文件存放路径 #

不要将需要注入变量的js源文件直接放在public目录，在项目根目录新建scripts目录，将自定义js的源码存放在该目录下，例如scripts/custom.js，源码中可以直接用process.env.XXX引用需要的环境变量。

步骤2：安装编译依赖 #

选择轻量的esbuild作为编译工具，执行命令安装开发依赖：
npm i esbuild -D

步骤3：修改构建命令 #

调整package.json中的脚本，在Next.js构建前先编译自定义js并输出到public目录：

{
  "scripts": {
    "build:scripts": "esbuild scripts/custom.js --bundle --define:process.env.NODE_ENV=\"'$(node -p \"process.env.NODE_ENV\")'\" --define:process.env.NEXT_PUBLIC_YOUR_VAR=\"'$(node -p \"process.env.NEXT_PUBLIC_YOUR_VAR\")'\" --outfile=public/custom.js",
    "build": "npm run build:scripts && next build",
    "dev": "npm run build:scripts && next dev"
  }
}

注意：只有前缀为NEXT_PUBLIC_的环境变量才允许暴露到客户端侧，不要将服务端专用的非公开环境变量注入到公开js文件中，避免敏感信息泄露。

步骤4：开发阶段自动热更新（可选） #

如果开发阶段需要修改源码后自动同步编译产物到public，可安装concurrently依赖，启用esbuild的监听模式：
npm i concurrently -D
修改dev命令如下：

{
  "scripts": {
    "dev:scripts": "esbuild scripts/custom.js --bundle --watch --define:process.env.NODE_ENV=\"'development'\" --define:process.env.NEXT_PUBLIC_YOUR_VAR=\"'$(node -p \"process.env.NEXT_PUBLIC_YOUR_VAR\")'\" --outfile=public/custom.js",
    "dev": "concurrently \"npm run dev:scripts\" \"next dev\""
  }
}

方案2：API路由动态生成JS（适合运行时动态变更环境变量的场景） #

如果你的环境变量需要在运行时调整，不需要构建时固定，可以不用生成静态文件到public，通过API路由动态返回js内容，再用rewrites做路径映射即可：

步骤1：新建API路由 #

在pages/api目录下新建custom-js.ts文件：

import type { NextApiRequest, NextApiResponse } from 'next'

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const jsContent = `
    // 注入你需要的环境变量
    const customVar = '${process.env.NEXT_PUBLIC_YOUR_VAR || ''}'
    // 下方粘贴你原自定义js的所有业务逻辑
    console.log('注入的环境变量值：', customVar)
  `
  res.setHeader('Content-Type', 'application/javascript')
  res.setHeader('Cache-Control', 'public, max-age=31536000, immutable')
  res.send(jsContent)
}

步骤2：配置路径重写 #

在next.config.js中添加rewrites规则，将访问/custom.js的请求代理到对应的API路由：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/custom.js',
        destination: '/api/custom-js',
      },
    ]
  },
}

module.exports = nextConfig

配置完成后你可以直接通过/custom.js访问动态生成的js文件，和放在public目录的访问路径完全一致。

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