# Next.js Metadata & SEO (React / Next.js) > Metadata API, OpenGraph, Twitter cards, sitemap, robots.txt, JSON-LD 스키마 - 18 면접 질문 - Mid-Level - [면접 질문: React / Next.js](https://sharpskill.dev/ko/technologies/react-next/interview-questions.md) ## 1. Next.js App Router에서 metadata를 정의하는 권장 방법은 무엇인가요? **답변** Next.js App Router는 layouts와 pages에서 내보내는 `metadata` 객체를 도입하여 type-safe하고 최적화된 방식으로 metadata를 정의합니다. 이 접근 방식은 Next.js 12의 `` 컴포넌트를 대체하며 metadata의 서버 사이드 렌더링을 가능하게 합니다. `metadata` export는 정적이며 build time에 분석되어 더 나은 SEO 성능을 제공합니다. ## 2. Next.js에서 라우트 매개변수를 기반으로 동적 metadata를 생성하는 방법은 무엇인가요? **답변** `generateMetadata` 함수는 비동기이며 `params`와 `searchParams`를 인수로 받아 데이터를 로드하여 metadata를 동적으로 구성할 수 있습니다. 렌더링 시 서버 사이드에서 실행되며 API 호출을 할 수 있습니다. 이를 통해 각 동적 페이지에 고유한 metadata를 생성할 수 있으며, 이는 상세 페이지 SEO에 필수적입니다. ## 3. Next.js는 중첩된 layouts와 pages 간의 metadata 병합을 어떻게 처리하나요? **답변** Next.js는 부모 layouts에서 자식 pages로 metadata를 자동으로 병합하며, page에 가장 가까운 값이 우선됩니다. 필드는 덮어쓰기됩니다(title, description). 단, `openGraph.images`와 `twitter.images`는 배열로 병합됩니다. 이 캐스케이드를 통해 루트 레벨에서 기본 metadata를 정의하고 page 레벨에서 재정의할 수 있습니다. ## 15개 추가 질문 이용 가능 - Next.js metadata에서 `title.template`를 사용하는 이점은 무엇인가요? - Next.js App Router에서 favicon을 정의하는 권장 방법은 무엇인가요? 무료로 가입하기: https://sharpskill.dev/ko/login ## 기타 React / Next.js 면접 주제 - [JavaScript 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/javascript-essentials.md): 25개 질문, Junior - [React 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-fundamentals.md): 20개 질문, Junior - [React Hooks](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-hooks.md): 22개 질문, Junior - [컴포넌트 라이프사이클](https://sharpskill.dev/ko/technologies/react-next/interview-questions/component-lifecycle.md): 18개 질문, Junior - [React Router](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-router.md): 20개 질문, Junior - [Context를 활용한 상태 관리](https://sharpskill.dev/ko/technologies/react-next/interview-questions/state-management-context.md): 18개 질문, Junior - [폼과 Controlled Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/forms-controlled-components.md): 20개 질문, Mid-Level - [데이터 가져오기 및 API](https://sharpskill.dev/ko/technologies/react-next/interview-questions/fetching-data-api.md): 20개 질문, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-query-tanstack.md): 20개 질문, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/ko/technologies/react-next/interview-questions/styling-css-in-js.md): 18개 질문, Mid-Level - [Next.js 기초](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25개 질문, Mid-Level - [TypeScript와 React](https://sharpskill.dev/ko/technologies/react-next/interview-questions/typescript-react.md): 20개 질문, Mid-Level - [Next.js 데이터 페칭](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24개 질문, Mid-Level - [Next.js Server Actions](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-server-actions.md): 20개 질문, Mid-Level - [Next.js 라우팅 및 내비게이션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22개 질문, Mid-Level - [Next.js API Routes](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-api-routes.md): 20개 질문, Mid-Level - [Next.js Middleware 및 Auth](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22개 질문, Mid-Level - [React 테스트](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-testing.md): 20개 질문, Mid-Level - [Zustand State Management](https://sharpskill.dev/ko/technologies/react-next/interview-questions/zustand-state-management.md): 18개 질문, Mid-Level - [React 성능 최적화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-performance-optimization.md): 22개 질문, Senior - [Error Boundaries & 에러 핸들링](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-error-boundaries.md): 18개 질문, Senior - [Advanced React Patterns](https://sharpskill.dev/ko/technologies/react-next/interview-questions/advanced-react-patterns.md): 20개 질문, Senior - [Next.js 고급 기능](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24개 질문, Senior - [Next.js 배포 및 프로덕션](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20개 질문, Senior - [아키텍처 & 디자인 패턴](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-architecture-patterns.md): 22개 질문, Senior - [React Server Components](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-server-components.md): 26개 질문, Senior - [Next.js 국제화](https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-internationalization.md): 20개 질문, Senior - [React 보안 & 모범 사례](https://sharpskill.dev/ko/technologies/react-next/interview-questions/react-security-best-practices.md): 22개 질문, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/ko/technologies/react-next/interview-questions/nextjs-metadata-seo