Next.js 렌더링·라우팅·기능 핵심 개념 10문항
10문항 · 4지선다 · 해설 포함
전체 10문항의 정답과 해설입니다. 아직 풀지 않았다면 위에서 먼저 풀어보세요.
Next.js App Router에서 페이지는 app/ 디렉토리 하위의 page.tsx(또는 .js) 파일로 정의합니다. 파일 시스템 기반 라우팅의 핵심 규칙입니다.
서버 컴포넌트는 서버에서만 실행되어 데이터베이스 직접 접근, 민감한 정보 처리가 가능합니다. 클라이언트 번들에 포함되지 않아 초기 로딩 속도가 빠릅니다.
정적 생성(SSG)은 빌드 시 HTML을 미리 만들어 CDN에서 서빙해 빠른 응답속도를 제공합니다. 블로그, 문서 사이트처럼 데이터가 자주 변하지 않을 때 적합합니다.
Next.js <Image>는 자동 크기 조정, WebP/AVIF 포맷 변환, 지연 로딩, blur placeholder 등을 기본 제공해 Core Web Vitals LCP 점수를 향상시킵니다.
Pages Router에서는 pages/api/, App Router에서는 app/api/ 디렉토리에 route.ts 파일을 만들어 API 엔드포인트를 생성합니다.
generateStaticParams는 App Router에서 동적 라우트([slug] 등)의 경로 파라미터를 미리 생성해 정적 생성(SSG)이 가능하게 합니다.
Next.js 미들웨어는 요청이 처리되기 전 Edge 런타임에서 실행됩니다. 인증, 리다이렉트, A/B 테스트, 지역화 등 요청 수정에 활용됩니다.
opengraph-image.tsx를 라우트 디렉토리에 두면 Next.js가 자동으로 og:image 메타태그를 주입하고 해당 경로에서 이미지를 서빙합니다. next/og의 ImageResponse를 활용합니다.
NEXT_PUBLIC_으로 시작하는 환경변수만 클라이언트 번들에 포함됩니다. 그 외 환경변수는 서버에서만 접근 가능해 API 키 등 민감 정보 보호에 중요합니다.
Turbopack은 Vercel이 개발한 Rust 기반 JavaScript 번들러로 Webpack의 대체재입니다. 증분 빌드 최적화로 개발 서버 시작·HMR 속도를 크게 향상시킵니다.
10문제이며 문제마다 보기 4개 중 하나를 고릅니다. 전체 1분 정도 걸립니다.
맞힌 개수를 10문제 기준으로 환산해 점수와 정답률을 함께 보여줍니다. 문제를 풀 때마다 정답 여부가 바로 표시됩니다.
기술·IT 분야의 상식 문제로 구성했습니다 — Next.js 렌더링·라우팅·기능 핵심 개념 10문항.
네, 10문제 모두 해설이 붙어 있습니다. 보기를 고르면 정답과 함께 왜 그런지 바로 확인할 수 있습니다.