Question 1

Next.js App Router에서 metadata를 정의하는 권장 방법은 무엇인가요?

Accepted Answer

Next.js App Router는 layouts와 pages에서 내보내는 `metadata` 객체를 도입하여 type-safe하고 최적화된 방식으로 metadata를 정의합니다. 이 접근 방식은 Next.js 12의 `<Head>` 컴포넌트를 대체하며 metadata의 서버 사이드 렌더링을 가능하게 합니다. `metadata` export는 정적이며 build time에 분석되어 더 나은 SEO 성능을 제공합니다.

Question 2

Next.js에서 라우트 매개변수를 기반으로 동적 metadata를 생성하는 방법은 무엇인가요?

Accepted Answer

`generateMetadata` 함수는 비동기이며 `params`와 `searchParams`를 인수로 받아 데이터를 로드하여 metadata를 동적으로 구성할 수 있습니다. 렌더링 시 서버 사이드에서 실행되며 API 호출을 할 수 있습니다. 이를 통해 각 동적 페이지에 고유한 metadata를 생성할 수 있으며, 이는 상세 페이지 SEO에 필수적입니다.

Question 3

Next.js는 중첩된 layouts와 pages 간의 metadata 병합을 어떻게 처리하나요?

Accepted Answer

Next.js는 부모 layouts에서 자식 pages로 metadata를 자동으로 병합하며, page에 가장 가까운 값이 우선됩니다. 필드는 덮어쓰기됩니다(title, description). 단, `openGraph.images`와 `twitter.images`는 배열로 병합됩니다. 이 캐스케이드를 통해 루트 레벨에서 기본 metadata를 정의하고 page 레벨에서 재정의할 수 있습니다.

Next.js Metadata & SEO

Next.js App Router에서 metadata를 정의하는 권장 방법은 무엇인가요?

답변

Next.js에서 라우트 매개변수를 기반으로 동적 metadata를 생성하는 방법은 무엇인가요?

답변

Next.js는 중첩된 layouts와 pages 간의 metadata 병합을 어떻게 처리하나요?

답변

Next.js metadata에서 `title.template`를 사용하는 이점은 무엇인가요?

Next.js App Router에서 favicon을 정의하는 권장 방법은 무엇인가요?

기타 React / Next.js 면접 주제

JavaScript 기초

React 기초

React Hooks

컴포넌트 라이프사이클

React Router

Context를 활용한 상태 관리

폼과 Controlled Components

데이터 가져오기 및 API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js 기초

TypeScript와 React

Next.js 데이터 페칭

Next.js Server Actions

Next.js 라우팅 및 내비게이션

Next.js API Routes

Next.js Middleware 및 Auth

React 테스트

Zustand State Management

React 성능 최적화

Error Boundaries & 에러 핸들링

Advanced React Patterns

Next.js 고급 기능

Next.js 배포 및 프로덕션

아키텍처 & 디자인 패턴

React Server Components

Next.js 국제화

React 보안 & 모범 사례

다음 면접을 위해 React / Next.js을 마스터하세요