Zenn
💎

環境変数に型を付与しよう！

2023/04/30に公開
Next.js
TypeScript
zod
tech

はじめに

皆さんは、Next.js で env ファイルを使用していて、process.envの後に env ファイルの環境変数を候補として出してほしいと感じたことはありませんか？
型を付与する方法を調べていたら、良さげなライブラリを見つけたので紹介します。
こちらの記事でおすすめされていました。

問題点

まずなにも使わずに、env ファイルを使用した際の問題点を挙げていきます。

  1. 型がstring | undefinedになる
    NEXT_PUBLIC_TITLE=hoge
    このように定義した環境変数に string のメソッドを使用します。
    const hoge = process.env.NEXT_PUBLIC_TITLE;
console.log(hoge.toUpperCase());
// 'test' は 'undefined' の可能性があります。
    となってしまいます。
  2. タイポに気づけない
    process.env.NEXT_PUBLIC_TITLとタイポをしてしまった場合に、気づくことができません。
  3. env ファイルに間違った値を設定してしまう
    例えば、http://localhostとたいのにhttp//localhostと:を忘れてしまっていても、気づくことができません。

解決方法

これらの問題を解決するために、T3 Envというライブラリを使用します。
https://env.t3.gg/

使い方

まずはインストールをします。

yarn add @t3-oss/env-nextjs zod

他にも@t3-oss/env-core zodでもインストールができるのですが、Next.jsで使いやすいように設定された@t3-oss/env-nextjsというものが存在するのでそちらをインストールします。そして、同時にzodもインストールしています。

zod とは

zodとは TypeScript ファストのスキーマ宣言、バリデーションライブラリです。
使い方としては、

import { z } from "zod";
const name = z.string();

このようにスキーマを宣言し、

name.parse("tanaka");
name.parse(1);

バリデーションを行います。name は string 型としてスキーマを宣言したので、number 型を渡すとエラーになります。
とりあえず○○.string()や○○.number()でバリデーションができると思っておけばよいです。

説明に戻ります。

まずは env ファイルを作成します。

.env
DATABASE_URL=http://localhost3000
NEXT_PUBLIC_NAME=tanaka

次に env ファイル用のスキーマを作成しましょう。

src/env.ts
import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod"

export const env = createEnv({
    // serverで使用するための環境変数
   server: {
    // urlかをバリデーションする
    DATABASE_URL: z.string().url()
   },
    // clietnで使用するための環境変数
    // Next.jsの場合NEXT_PUBLICから始める必要がある
   client: {
    // stringで1文字以上10文字以下
    NEXT_PUBLIC_NAME: z.string().min(1).max(10),
   },
   // envファイルと紐づける
   runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NEXT_PUBLIC_NAME: process.env.NEXT_PUBLIC_NAME
   }
})

それでは、使用してみましょう

src/pages/index.tsx
import { env } from '@/env'

const Home = () => {
  const name = env.NEXT_PUBLIC_NAME
  console.log(name.toUperCase()) // TANAKA

  return (
   <h1>view</h1>
  )
}
export default Home

env.と入力した時点でenv.tsで設定した環境変数が候補として出ています。
さらに、型が string となっています。
ためしに、env ファイルのNEXT_PUBLIC_NAMEを 10 文字より多くしたり、DATABASE_URLの値を変えてみると、エラーとなります。
また、エラーの際、ログに詳細なエラーメッセージが表示されます。
例：NEXT_PUBLIC_NAME=tanakasatouyamada(文字数がオーバーしている)

Invalid environment variables: { NEXT_PUBLIC_NAME: [ 'String must conta in at most 10 character(s)' ] }

まとめ

以上が、T3 Env の使用方法です。
候補を出すだけでなく、url の形式に制限するなどできるので、積極的に使用していきたいですね。

使用ライブラリとそのバージョン

"@t3-oss/env-nextjs": "^0.2.2",
"zod": "^3.21.4"

参考

https://env.t3.gg/

Discussion