vercel.ts: 코드로 프로젝트 설정하기

Vercel이 정적 JSON 설정 파일을 대체하는 TypeScript 기반 `vercel.ts` 설정 파일을 출시했다. 타입 안전성, 동적 로직, 환경 변수 접근이 가능해져 복잡한 라우팅·캐싱·크론 설정을 코드로 표현할 수 있다. `.json`, `.js`, `.mjs`, `.cjs`, `.mts` 파일 형식을 모두 지원한다.

`vercel.ts`는 기존 `vercel.json`을 TypeScript 파일로 교체한다. 속성 정의는 `vercel.json`과 동일하지만, TypeScript를 사용하므로 환경 변수 접근과 조건부 로직이 가능하다.

공식 예시:

```typescript import { type VercelConfig, routes, deploymentEnv } from '@vercel/config/v1';

export const config: VercelConfig = { framework: 'nextjs',

crons: [ { path: '/api/cleanup', schedule: '0 0 * * *' }, { path: '/api/sync-users', schedule: '*/15 * * * *' }, ],

rewrites: [ routes.rewrite('/(.*)', 'https://external-api.com', { requestHeaders: { 'proxy-header': deploymentEnv('PROXY_HEADER') } }), ], }; ```

`deploymentEnv('PROXY_HEADER')`는 배포 환경의 환경 변수를 설정 파일 내에서 직접 참조하는 헬퍼다. 기존 `vercel.json`에서는 환경 변수를 설정 파일에서 직접 참조할 수 없었는데, `vercel.ts`는 이를 해결한다.

설정 가능한 영역: - **고급 라우팅**: 커스텀 요청 처리, URL 리라이트 - **요청 변환**: 헤더 수정, 커스텀 로직 - **캐싱 규칙**: 성능 최적화를 위한 캐시 설정 - **크론 잡**: 주기적 작업 실행 스케줄