nextjs
CHAPTER 18 / 34
읽기 약 2분
SYNTAX
next.config.ts 해부: 프로젝트 설정
핵심 개념
next.config.ts로 Next.js 프로젝트를 설정합니다. images.domains, redirects, headers, env를 설정합니다. 설정을 지우며 기능이 어떻게 제한되는지 확인하십시오.
코드 분석
NEXT.CONFIG.TS
const config = {
// 외부 이미지 허용
images: {
domains: ['example.com'],
},
// 리다이렉트
async redirects() {
return [{
source: '/old',
destination: '/new',
permanent: true,
}]
},
// 환경변수
env: {
API_URL: 'https://api.cyberdyne.com',
},
}
export default configAI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'next.config.ts' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'next.config.ts'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'next.config.ts' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'next.config.ts' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
next.config.ts 해부: 프로젝트 설정은 이 3가지만 확실히 잡으세요
1.next.config 없이는 이미지 외부 도메인 허용, 리다이렉트, 환경 변수 노출 같은 프로젝트 설정이 불가능합니다
2.images.remotePatterns으로 외부 이미지를 허용하고, redirects/rewrites로 URL을 제어하며, env로 환경 변수를 관리합니다
3.다음 챕터에서 Next.js 문법 트랙의 모든 개념을 종합 정리합니다
공유하기
진행도 18 / 34