このチャプターの目次
環境変数を .envファイルで扱う
環境変数は、 Next.jsでの .envファイルの仕組みに乗ることができます。
プロジェクト直下にデフォルトで .env ファイルが作られているので、そこを編集して適当な環境変数を設定しておきます。
サーバサイドの秘匿情報のHOGEと、クライアント側でも使うNEXT_PUBLIC_FUGA環境変数を設定します。 [1]
HOGE=this is secret HOGE
NEXT_PUBLIC_FUGA=this is public FUGA
あとは Next.jsのプロセスを再起動すればよいのですが、 create-t3-app で作られるプロジェクトはより環境変数の利用を型の運用と同期できるよう、チェックしてくれる仕組みがあります。
schema.mjs
環境変数をコード上から参照したい場合は、 src/env/schema.mjs を編集しましょう。サーバサイドの秘匿変数は serverSchemaを zod で宣言します。クライアント側はclientSchema, clientEnvに宣言します。
diff --git a/src/env/schema.mjs b/src/env/schema.mjs
index 61515a1..76b96b2 100644
--- a/src/env/schema.mjs
+++ b/src/env/schema.mjs
@@ -12,6 +12,7 @@ export const serverSchema = z.object({
NEXTAUTH_URL: z.string().url(),
DISCORD_CLIENT_ID: z.string(),
DISCORD_CLIENT_SECRET: z.string(),
+ HOGE: z.string(),
});
/**
@@ -21,6 +22,7 @@ export const serverSchema = z.object({
*/
export const clientSchema = z.object({
// NEXT_PUBLIC_BAR: z.string(),
+ NEXT_PUBLIC_FUGA: z.string(),
});
/**
@@ -31,4 +33,5 @@ export const clientSchema = z.object({
*/
export const clientEnv = {
// NEXT_PUBLIC_BAR: process.env.NEXT_PUBLIC_BAR,
+ NEXT_PUBLIC_FUGA: process.env.NEXT_PUBLIC_FUGA,
};
あとは、サーバサイド側のコードであれば (src/server以下) env/server.mjs から env をインポートし、クライアント側でも実行される場合のコードは env/client.mjs から env をインポートして参照すればよいです。
diff --git a/src/server/trpc/router/example.ts b/src/server/trpc/router/example.ts
index e66eeec..3a1a2bc 100644
--- a/src/server/trpc/router/example.ts
+++ b/src/server/trpc/router/example.ts
@@ -1,5 +1,6 @@
import { t } from "../trpc";
import { z } from "zod";
+import { env } from "../../../env/server.mjs";
export const exampleRouter = t.router({
hello: t.procedure
@@ -13,6 +14,6 @@ export const exampleRouter = t.router({
return ctx.prisma.example.findMany();
}),
myProcedure: t.procedure.query(() => {
+ do_something_with(env.HOGE)
return { hoge: "fuga" };
}),
});
-
Next.jsではNEXT_PUBLIC_のプレフィックスがついている環境変数はクライアント側のコードにもバンドルされるようになります ↩︎