Next.js 13+TypeScript环境变量自动补全实现方法

方法一：添加TypeScript类型声明文件 #

如果项目使用TypeScript，在根目录创建env.d.ts文件，写入以下内容：

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      site_url: string;
      // 其他需要补全的环境变量可在此添加
    }
  }
}

export {};

保存后，IDE会自动识别环境变量并提供补全提示。

方法二：JavaScript项目适配方案 #

纯JavaScript项目可通过@types/node提供类型支持：

1. 安装依赖：

npm install @types/node --save-dev

2. 同样创建上述env.d.ts类型声明文件，IDE会读取该文件为process.env提供补全。

方法三：框架自动生成类型（Vite/Next.js等） #

• Vite：默认只识别带VITE_前缀的变量，若你的变量无此前缀，需在vite.config.ts中修改配置：

import { defineConfig } from 'vite';

export default defineConfig({
  envPrefix: '', // 设为空字符串即可识别所有前缀的变量
});

重启IDE后，Vite会自动读取.env.local中的变量并生成补全类型。

• Next.js：无需额外配置即可自动识别.env.local中的变量，若需自定义类型，仍可使用方法一的声明文件。

注意：若环境变量未被框架或工具正确加载，需先确保变量能被process.env正常读取，再配置类型补全。

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