Next.js 공개 변수
- Barbara Streisand원래의
- 2024-10-21 20:41:30542검색
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에서 변수를 가져와 예상 유형으로 안전하게 캐스팅하는 일부 유틸리티 함수가 포함된 Variable.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 스키마를 사용하여 변수를 구문 분석하고 변수가 유효하지 않으면 오류를 발생시키는 유틸리티 함수입니다.
마지막으로 변수 스키마와 변수를 로드하고 구문 분석하는 유틸리티 함수가 포함된 Variable.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!