Astroでの型安全な環境変数

Astroで環境変数 (.env) を扱う際、process.env ではなく import.meta.env を使用する。 さらに、src/env.d.ts で型定義を行うことで、TypeScriptの恩恵をフルに受けられる。

.env

PUBLIC_API_URL=https://api.example.com
SECRET_KEY=xxxxx

PUBLIC_ プレフィクスがついた変数のみ、クライアントサイドのJavaScriptからアクセス可能になる。

型定義 (src/env.d.ts)

interface ImportMetaEnv {
  readonly PUBLIC_API_URL: string;
  readonly SECRET_KEY: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

こうしておけば、import.meta.env. まで打った時点で自動補完が効くようになり、タイプミスを防げる。 地味だけど開発体験 (DX) に大きく貢献する機能。