Extension / Plugin / Library

hansf14 Env Typings
Auto Intellisense for process.env in Next.js Projects
[Featured Project]

1. Introduction

Auto Intellisense for process.env in Next.js Projects:

Managing environment variables in Next.js often leads to mistakes due to the lack of autocomplete or static typing for process.env. To solve this, I forked and customized the original TS Env Typings extension to better suit modern Next.js workflows and eliminate common dev pitfalls.

Use Cases:
  • Next.js projects needing strong environment variables typing.
  • Teams tired of silent undefined bugs in process.env.
  • Freelance/enterprise setups with strict typing & DX requirements.
What It Does:
This custom VSCode extension:
  • Parses your .env.local (or any env file you register).
  • Autogenerates publicEnv.ts and serverEnv.ts.
  • Gives full intellisense and type safety for both public (NEXT_PUBLIC_) and server-only variables.
  • Supports Next.js conventions and distinguishes public/private automatically.
Benefits:
  • Avoid typos in process.env.
  • Safe variable access with autocomplete.
  • Simple config via env-typings.json.
  • Regenerates automatically on save.
How It Works:
1. At the root of your Next.js project, create a env-typings.json file:
json
{
  "path": "./.env.local"
}
2. On save, the extension:
  • Reads the env file.
  • Separates variables into:
    • publicEnv.ts (for NEXT_PUBLIC_*)
    • serverEnv.ts (for private variables)
  • Exports them as typed readonly constants.
3. You can now import them:
typescript
import { PublicEnv } from './publicEnv';

console.log(PublicEnv.NEXT_PUBLIC_META_DEFAULT_TITLE);

with autocompletion and type checking.

Example Output Structure:
  • publicEnv.ts
    typescript
    export class PublicEnv {
  static readonly NEXT_PUBLIC_SITE_NAME = "My Site";
  static readonly NEXT_PUBLIC_API_BASE = "https://api.example.com";
}
  • serverEnv.ts
    typescript
    export class ServerEnv {
	static readonly DB_PASSWORD = "supersecret";
}

2. Techs

  • Language / Script

  • API

  • IDE

  • VCS

  • Compiler / Transpiler / Bundler / Build Tool

  • Linter / Formatter

  • Package Manager / Dependency Manager

  • Etc.

3. Screenshots

© 2025 hansf14. All Rights Reserved.