Next.js 공개 변수

Next.js는 환경 변수 처리로 인해 악명 높은 비판을 받아왔습니다. 수년에 걸쳐 개선되었지만 특히 process.env 개체를 통해 노출되는 공용 변수와 관련하여 혼란스러울 수 있는 몇 가지 단점이 여전히 있습니다.

NEXT_PUBLIC_ 접두사가 붙은 모든 변수는 클라이언트 측에서 액세스할 수 있지만 공식 문서에 언급된 것처럼 빌드 시에만 사용할 수 있으므로 Docker와 함께 사용할 경우 런타임에 변경할 수 없습니다.

과거에 이 문제를 다뤘지만 런타임 시 변경될 수 있는 전역 공유 변수를 사용하는 흥미로운 또 다른 접근 방식을 발견했습니다.

폴리필 설정

전역 변수는 Next.js에서 부분적으로 지원되지만 폴리필을 사용하면 작은 삽입 스크립트를 통해 전역 변수를 사용할 수 있습니다.

// app/layout.tsx
<script dangerouslysetinnerhtml="{{" __html: e t.prototype._t_ globalthis></script>

원본 코드는 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) 



<p>load는 process.env 객체를 반환하는 간단한 함수인 반면,parseOrThrow는 Zod 스키마를 사용하여 변수를 구문 분석하고 변수가 유효하지 않으면 오류를 발생시키는 유틸리티 함수입니다.</p>

<p>마지막으로 변수 스키마와 변수를 로드하고 구문 분석하는 유틸리티 함수가 포함된 Variable.ts 파일을 생성할 수 있습니다.<br>
</p>

<pre class="brush:php;toolbar:false">// 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 (
    
      {children}
    
  );
}

참고자료

• Next.js 환경 변수
• Next.js GitHub 토론

위 내용은 Next.js 공개 변수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!