Next.js 15 App Router로 SEO 최적화하기

왜 App Router에서 SEO가 중요한가

Next.js 15의 App Router는 기본적으로 서버 컴포넌트로 동작하며, 정적 생성(SSG)과 메타데이터 API를 통해 검색엔진이 이해하기 쉬운 HTML을 빌드 타임에 만들어 냅니다. 클라이언트 렌더링에 의존하지 않으므로 크롤러가 콘텐츠를 즉시 읽을 수 있습니다.

핵심 체크리스트

• 메타데이터: 페이지마다 고유한 title/description을generateMetadata로 동적 생성합니다.
• 정적 생성: generateStaticParams로 모든 경로를 빌드 타임에 미리 만들어 둡니다.
• 구조화 데이터: JSON-LD(BlogPosting, Breadcrumb 등)를 삽입해 리치 결과 노출 가능성을 높입니다.
• 정규 URL: alternates.canonical로 중복 색인을 방지합니다.

무한 발행 구조

이 블로그는 글 하나가 디렉토리 하나에 대응됩니다. 새 글을 추가하려면meta.ts와 content.tsx를 만든 뒤 레지스트리에 한 줄만 등록하면 됩니다. 데이터 소스가 추상화되어 있어 추후 CMS로 교체하더라도 라우트 코드는 그대로 유지됩니다.

지금 보고 계신 이 글이 바로 그 구조로 발행된 첫 번째 예제입니다.