ホームページ > 記事 > ウェブフロントエンド > Next.js パブリック変数
Next.js パブリック変数
- Barbara Streisandオリジナル
- 2024-10-21 20:41:30436ブラウズ
Next.js は、環境変数の処理に関して悪名高く批判されています。長年にわたって改良されてきましたが、依然としていくつかの癖があり、特に process.env オブジェクトを通じて公開されるパブリック変数に関しては混乱を招く可能性があります。
NEXT_PUBLIC_ 接頭辞の付いた変数はすべてクライアント側でアクセスできますが、公式ドキュメントで述べられているように、これらはビルド時にのみ使用できるため、Docker で使用する場合は実行時に変更できません。
この問題については以前にも取り上げましたが、実行時に変更できるグローバル共有変数を使用する、検討すると興味深いかもしれない別のアプローチを見つけました。
ポリフィルのセットアップ
グローバル変数は Next.js で部分的にサポートされていますが、ポリフィルを使用して、注入された小さなスクリプトで使用できるようにすることができます。
// app/layout.tsx
<script
dangerouslySetInnerHTML={{
__html: `!function(t){function e(){var e=this||self;e.globalThis=e,delete t.prototype._T_}"object"!=typeof globalThis&&(this?e():(t.defineProperty(t.prototype,"_T_",{configurable:!0,get:e}),_T_))}(Object);`,
}}
/>
元のコードは GitHub のこのコメントから抜粋されたもので、基本的にクライアントとサーバー間で変数を共有するために使用できるグローバルな globalThis オブジェクトを作成します。ポリフィルは Next.js 14.x に付属していますが、一部のブラウザでは globalThis オブジェクトが壊れるようです。そのため、__html プロパティを使用してコードをページに直接挿入しています。
Zod を使用した変数の検証
次に、Zod を使用して実行時に変数を検証し、変数が有効でない場合はエラーをスローします。このステップは、変数が常に利用可能で有効であることを保証し、実行時エラーを回避したり、アプリケーションがセキュリティ上の問題にさらされることを避けるために非常に重要です。
npm install zod
次に、process.env から変数を取得し、期待される型に安全にキャストするためのいくつかのユーティリティ関数を含む variables.ts ファイルを作成します。
// lib/env.ts
import { z } from 'zod';
// Load the variables
export const load = () => {
return process.env;
};
// Parse or throw the variables
export function parseOrThrow(schema: z.Schema, data: unknown, error: Error) {
const parsed = schema.safeParse(data);
// Log the errror
if (parsed.success) return parsed.data;
console.error(parsed.error);
throw error;
}
// Some zod helpers to use
export const port = z
.string()
.refine(
(port) => parseInt(port) > 0 && parseInt(port) < 65536,
'Invalid port number'
);
export const str = z.string();
export const url = z.string().url();
export const num = z.coerce.number();
export const bool = z.coerce.boolean();
load は process.env オブジェクトを返す単純な関数ですが、parseOrThrow は Zod スキーマを使用して変数を解析し、変数が有効でない場合にエラーをスローするユーティリティ関数です。
最後に、変数スキーマと、変数をロードして解析するためのユーティリティ関数を含む variables.ts ファイルを作成できます。
// lib/vars.ts
import { z } from 'zod';
import { load, parseOrThrow } from './env';
import { parseOrThrow, load, str, num, bool, port } from './env';
// Define the variables schema
const schema = z.object({
PUBLIC_VARIABLE: str.optional(),
PUBLIC_MY_NUM: num,
PUBLIC_BOOL: bool,
PUBLIC_PORT: port,
});
export const loadEnv = () => {
const env = load();
const parsed = parseOrThrow(schema, env, new Error('Invalid variables'));
for (const key of Object.keys(parsed)) {
if (!globalThis[key]) {
globalThis[key] = parsed[key];
}
}
};
変数の使用
変数を使用するには、まず変数をロードする必要があります。 app/layout.tsx ファイルまたはその他のレイアウト ファイルでこれを実行し、クライアントとサーバーの両方でアプリケーションの残りの部分にそれらを徐々に公開できます。
// app/layout.tsx
import { loadEnv } from '@/lib/vars';
loadEnv();
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
参考文献
- Next.js 環境変数
- Next.js GitHub ディスカッション
以上がNext.js パブリック変数の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。