🔎 Next.js를 이용한 SEO 최적화

검색 엔진 최적화(SEO)는 웹 서비스의 트래픽과 직결되는 중요한 요소다. React 기반 애플리케이션에서 SEO를 효과적으로 적용하려면 단순한 CSR 구조를 넘어서는 전략이 필요하다.

Next.js는 서버 사이드 렌더링과 정적 생성 기능을 제공하여 검색 엔진 친화적인 웹 애플리케이션을 구축할 수 있도록 돕는다. 이번 글에서는 Next.js에서 SEO를 최적화하는 핵심 방법들을 정리하였다.

1. 렌더링 전략 최적화  

Next.js의 렌더링 전략은 SEO 성능과 직결되는 핵심 요소다. 검색 엔진 크롤러(Googlebot, Yeti)는 페이지에 접근하면 먼저 HTML 문서를 읽고 콘텐츠를 분석한다.

CSR 방식은 클라이언트에서 자바스크립트가 실행된 이후에 화면이 완성되기 때문에 초기 HTML이 비어 있을 수 있다. 이로 인해 크롤러가 콘텐츠를 제대로 인식하지 못하거나 인덱싱이 지연될 위험이 있다.

반면 서버에서 미리 완성된 HTML을 제공하는 SSR 방식은 크롤러가 즉시 콘텐츠를 수집할 수 있어 SEO에 유리하다. 이러한 장점을 기반으로 Next.js는 SSR을 포함해 SSG, ISR까지 세 가지 렌더링 전략을 지원하여 상황에 맞는 SEO 최적화가 가능하다.

- SSG (Static Site Generation)

SSG는 웹 애플리케이션을 서버에 배포하기 전 빌드 시점에 각 페이지의 HTML을 미리 생성해 두는 렌더링 방식이다. 사용자가 페이지를 요청하면 서버는 이미 만들어진 정적 HTML 파일을 즉시 반환한다.

Next.js App Router 환경에서 SSG를 구현하는 방법은 데이터 패칭 유무와 라우트 형태에 따라 다음과 같이 적용한다.

1. 데이터 패칭이 없는 페이지
fetch 함수나 동적 함수를 사용하지 않는 순수 UI 컴포넌트는 시스템이 빌드 시점에 자동으로 정적 HTML로 생성한다.

2. 데이터 패칭이 포함된 페이지
API 등 외부 데이터를 호출하여 페이지를 구성하는 경우 fetch 요청 시 캐싱 옵션을 명시해야 한다. Next.js 15 버전부터 fetch의 기본값이 캐싱 없음(no-store)으로 변경되었기 때문에 빌드 시점에 데이터를 가져와 정적 페이지로 고정하려면 cache: 'force-cache'를 설정해야한다.

interface PageData {
  title: string;
}​

export default async function Page() {
  const res = await fetch('https://api.pyomin.com/data', {
    cache: 'force-cache',
  });
  if (!res.ok) throw new Error('Failed to fetch data');
  
  const data: PageData = await res.json();
  return <main>{data.title}</main>;
}

3. 동적 라우트 페이지 ([id], [slug] 등)
URL 경로가 동적인 페이지를 빌드 시점에 미리 생성하려면 generateStaticParams 함수를 사용해야 한다. 이 함수가 반환하는 매개변수 배열을 바탕으로 Next.js가 각각의 정적 HTML 파일을 빌드한다.

interface Post {
  slug: string;
}​

export async function generateStaticParams() {
  const res = await fetch('https://api.pyomin.com/posts');
  if (!res.ok) throw new Error('Failed to fetch posts');
  
  const posts: Post[] = await res.json();
  return posts.map((post) => ({
    slug: String(post.slug),
  }));
}

4. 라우트 세그먼트 설정 강제
특정 라우트 파일(page.tsx 또는 layout.tsx) 최상단에 렌더링 방식을 명시적으로 선언하여 파일 내부의 로직과 무관하게 해당 페이지 전체를 SSG로 강제할 수 있다.

export const dynamic = 'force-static';

- SSR (Server-Side Rendering)

SSR은 사용자의 페이지 요청이 발생할 때마다 서버에서 데이터를 새로 가져와 HTML을 실시간으로 렌더링하여 반환하는 방식이다.

Next.js App Router 환경에서 SSR을 구현하는 방법은 다음과 같다.

1. 캐싱 비활성화를 통한 동적 렌더링 유도
fetch요청 시 캐싱을 하지 않도록 옵션을 설정하면 해당 페이지는 매 요청마다 서버에서 렌더링된다. Next.js 15 버전부터는 fetch의 기본값이 no-store이므로 별도 옵션 없이도 SSR로 동작하지만 명시적으로 작성하는 것이 코드의 의도를 파악하기 좋다.

export default async function Page() {
  const res = await fetch('https://api.pyomin.com/posts', {
    cache: 'no-store',
  });
  if (!res.ok) throw new Error('Failed to fetch data');
  
  const data = await res.json();
  return <main>{data.title}</main>
}

2. 동적 함수 사용
cookies(), headers(), searchParams와 같이 요청 시점에만 알 수 있는 정보에 접근하는 함수를 컴포넌트 내에서 호출하면 Next.js는 해당 라우트를 자동으로 동적 렌더링 페이지로 전환한다.

import { cookies } from 'next/headers';

export default function Page() {
  const cookieStore = cookies();
  const theme = cookieStore.get('theme');
  
  return <main>Current Theme: {theme?.value}</main>;
}​

3. 라우트 세그먼트 설정 강제
특정 라우트 파일 최상단에 렌더링 방식을 명시적으로 선언하여 내부 구현과 무관하게 해당 페이지 전체를 SSR로 강제할 수 있다.

export const dynamic = 'force-dynamic';

- ISR (Incremental Static Regeneration)

ISR은 전체 사이트를 다시 빌드하지 않고도 특정 주기나 조건에 따라 기존의 정적 페이지(SSG)를 백그라운드에서 업데이트하는 하이브리드 렌더링 방식이다. 사용자에게는 항상 캐시된 빠른 정적 페이지를 제공하면서도 데이터의 최신성을 유지할 수 있다.

Next.js App Router 환경에서 ISR을 구현하는 방법은 다음과 같다.

1. 시간 기반 재검증
fetch요청 시 next.revalidate 옵션을 지정하여 일정 시간(초)을 설정하여 해당 주기가 지날 때마다 백그라운드에서 데이터를 다시 패칭하고 캐시를 갱신한다.

interface PageData {
  title: string;
}

export default async function Page() {
  const res = await fetch('https://api.pyomin.com/posts', {
    next: { revalidate: 60 },
  });
  if (!res.ok) throw new Error('Failed to fetch data');
  
  const data: PageData = await res.json();
  return <main>{data.title}</main>;
}

2. 온디맨드 재검증
시간 주기에 의존하지 않고 값이 변경된 즉시 특정 페이지나 데이터의 캐시를 수동으로 강제 무효화한다. fetch에 태그를 지정하고 데이터 업데이트 시점에 라우트 핸들러 등에서 revalidateTag 또는 revalidatePath를 호출한다.

// 1. 고유 태그 부여
const res = await fetch('https://api.pyomin.com/posts', {
  next: { tags: ['posts'] },
});

// ----------------------------------------------------

// 2. 외부 API 또는 라우트 핸들러에서 데이터 수정 시 태그 기반 캐시 무효화 실행
import { revalidateTag } from 'next/cache';

export async function POST(request: Request) {
  // DB 업데이트 로직 이후...
  revalidateTag('posts')​; // 'posts' 태그가 붙은 모든 fetch 캐시 즉시 삭제 및 재생성 유도
  return Response.json({ revalidated: true });
}

3. 라우트 세그먼트 설정 강제
특정 라우트 파일 최상단에 revalidate 변수를 선언하여 파일 내부의 모든 데이터 패칭이나 렌더링의 재검증 주기를 일괄적으로 설정할 수 있다.

// 해당 라우트의 모든 렌더링 결과를 3600초(1시간)마다 재검증
export const revalidate = 3600;

참고) 페이지 단위의 라우트 세그먼트 설정과 컴포넌트 내부 fetch함수의 개별 캐시 설정이 혼재할 경우 Next.js는 가장 짧은 재검증 주기를 해당 라우트 전체의 기준으로 병합하여 적용한다.

2. 메타데이터 관리 (Metadata API)

Next.js에서는 기존의 next/head 컴포넌트를 대체하는 Metadata API를 제공하는데 <head> 영역에 포함되는 title, description, Open Graph 정보 등을 서버 측에서 렌더링하여 검색 엔진 크롤러가 명확한 페이지 정보를 수집할 수 있도록 돕는다.

- 정적 메타데이터

페이지의 메타데이터가 고정되어 있는 경우 사용한다. layout.tsx 또는 page.tsx 파일 최상단에서 metadata 객체를 export 하면 Next.js가 빌드 시점이나 렌더링 시점에 해당 객체를 읽어 <head> 태그 내부에 적절한 메타 태그로 주입한다.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'About',
  description: 'BlueCool12의 이력과 프로젝트를 소개합니다.',
  alternates: {
    canonical: '/about', // 중복 콘텐츠 문제 방지
  },
  openGraph: {
    title: 'About',
    description: 'BlueCool12의 이력과 프로젝트를 소개합니다.',
    url: 'https://pyomin.com/about',
  },
};

export default function AboutPage() {
  // ...
}​

- 동적 메타데이터

동적 라우트 페이지에서 데이터베이스 조회 결과에 따라 메타데이터를 변경해야 할 때 사용할 수 있다. 예를 들어 [id], [slug]와 같은 동적 경로에서 게시글 제목이나 설명을 페이지 데이터에 맞게 설정하는 경우가 이에 해당한다.

페이지 컴포넌트와 동일하게 params와 searchParams를 전달받아 내부에서 데이터를 조회한 후 generateMetadata 비동기 함수를 통해 메타데이터 객체를 동적으로 생성할 수 있다.

또한 generateMetadata 내부의 fetch 요청과 페이지 컴포넌트에서 동일한 API를 호출하는 경우 Next.js는 자동으로 요청을 메모이제이션한다. 따라서 동일한 데이터 요청이 발생하더라도 실제 네트워크 요청은 한 번만 수행된다.

import type { Metadata }​ from 'next';

interface Props {
  params: Promise<{ slug: string }>;
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug: rawSlug } = await params;
  const slug = decodeURIComponent(rawSlug);
  const post = await postService.getPostBySlug(slug);
  
  return {
    title: post.title,
    description: post.description,
    alternates: {
      canonical: `/posts/${slug}`,
    },
    openGraph: {
      title: post.title,
      description: post.description,
      type: 'article',
      url: `https://pyomin.com/posts/${slug}`,
    },
  };
}​

- 메타데이터 템플릿

페이지 제목에 공통 접미사 또는 접두사를 자동으로 추가할 때는 layout.tsx와 같은 상위 레이아웃 파일에서 메타데이터 템플릿을 설정할 수 있다.

title.template을 활용하면 하위 페이지에서 제목을 작성할 때 반복되는 문자열을 자동으로 붙일 수 있다.

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    template: '%s | BLUECOOL',
    default: 'BLUECOOL',
  },
  description: 'BlueCool은 다양한 인사이트를 전하는 개발자 블로그입니다.',
};

결과적으로 하위 페이지에서는 title: 'About' 으로만 설정해도 실제 브라우저와 검색 엔진에는 <title>About | BLUECOOL</title>로 노출된다.

- 파일 기반 메타데이터

favicon, opengraph-image와 같은 정적 메타데이터 파일은 코드에 직접 작성하지 않고 특정한 이름 규칙을 가진 파일을 지정된 폴더 경로에 배치하는 것만으로 자동으로 메타 태그로 변환된다.

이 방식은 코드 복잡도를 줄이고 정적 리소스를 효율적으로 관리할 수 있으며 사이트 아이콘이나 Open Graph 이미지처럼 변경 빈도가 낮은 메타데이터를 처리할 때 유용하다.

3. 검색 엔진 크롤링 및 인덱싱 설정

검색 엔진은 웹사이트를 방문할 때 가장 먼저 robots.txt를 읽어 크롤링 허용 범위를 파악하고 sitemap.xml을 통해 전체 페이지 구조와 최신 업데이트 내역을 수집한다. Next.js에서는 정적 파일을 직접 배치하거나 코드를 통한 동적 생성 방식을 모두 지원한다.

- robots.txt

검색 엔진 크롤러가 접근할 수 있는 경로와 접근을 차단할 경로를 정의한다. app/robots.ts 파일을 생성하여 MetadataRoute.Robots 객체를 반환하는 함수를 작성한다.

import { MetadataRoute } from 'next';​

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [{ userAgent: '*', allow: '/' }],
    sitemap: 'https://pyomin.com/sitemap.xml',
  };
}

동적 방식을 사용하면 환경 변수에 따라 크롤링 허용 여부를 분기 처리하기 유리하다는 장점이 있다.

- sitemap.xml

사이트 내의 모든 유효한 URL 목록과 각 페이지의 마지막 수정일, 변경 빈도, 중요도를 검색 엔진에 제공하여 인덱싱 효율을 높인다.

app/sitemap.ts 파일을 생성하여 MetadataRoute.Sitemap 배열을 반환하는 비동기 함수를 작성한다.

import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://api.pyomin.com';
  
  // 동적 경로
  const posts = await fetch(`${baseUrl}/posts`).then((res) => res.json());
  const postUrls: MetadataRoute.Sitemap = posts.map((post) => ({
    url: `https://pyomin.com/posts/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly',
    priority: 0.8,
  }));
  
  // 정적 경로
  const staticUrls: MetadataRoute.Sitemap = [
    {
      url: 'https://pyomin.com',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1.0,
    },
    {
      url: 'https://pyomin.com/about',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.5,
    },
  ];
  
  // 정적 경로와 동적 경로 병합하여 반환
  return [...staticUrls, ...postUrls];
}​

구글의 사이트맵 규격에 따라 단일 사이트맵 파일은 최대 5만개의 URL까지만 포함할 수 있으므로 동적 경로가 이를 초과할 경우 generateSitemaps 기능을 사용하여 여러 개의 사이트맵으로 분할하는 것이 좋다.

4. 이미지 최적화

검색 엔진은 페이지 경험을 평가할 때 코어 웹 바이탈 지표를 검색 랭킹에 반영한다. Next.js의 Image 컴포넌트는 이 중에서도 LCP(최대 콘텐츠 풀 페인트)와 CLS(누적 레이아웃 이동)를 시스템 레벨에서 최적화하도록 설계되어 있다.

import Image from 'next/image';

export default function AboutPage() {
  return (
    <main>
      <Image
        src='/images/about.webp'
        alt='BlueCool12 마스코트 이미지'
        width={160}
        height={160}
        priority // 브라우저에 최우선 로드 지시 (LCP 최적화)
      />​
    </main>
  );
}

Image 컴포넌트는 width와 height 속성을 필수로 요구하여 렌더링 시점에 이미지 영역을 미리 확보한다. 이를 통해 레이아웃 이동을 원천적으로 방지할 수 있다. 또한 기본적으로 지연 로딩이 적용되며 WebP 및 AVIF와 같은 현대적 이미지 포맷으로 자동 변환되어 성능을 최적화한다.

페이지 최상단에 위치하여 화면에서 가장 큰 비중을 차지하는 핵심 이미지의 경우 지연 로딩이 적용되면 오히려 성능 지표가 하락할 수 있기 때문에 LCP 개선을 위해 priority 속성을 부여하여 브라우저가 해당 이미지를 최우선으로 로드하도록 설정하는 것이 좋다.

또한 alt 속성은 스크린 리더 사용자를 위한 웹 접근성 요소일 뿐만 아니라 검색 엔진이 이미지의 의미와 문맥을 이해하는 데 활용되므로 구체적으로 작성하는 것이 좋다.

5. JSON-LD (구조화된 데이터)

JSON-LD는 검색 엔진 크롤러가 웹 페이지의 문맥과 데이터를 기계적으로 이해하도록 돕는 표준 포맷이다.

일반적인 텍스트 검색 결과 외에도 별점, 가격, 리뷰, FAQ 등의 정보를 검색 결과 페이지에 시각적으로 노출할 수 있으며 이는 사용자 클릭률 향상에 긍정적인 영향을 줄 수 있다. 구글은 구조화된 데이터를 제공할 때 JSON-LD 형식을 공식적으로 권장하고 있다.

// app/posts/[slug]/page.tsx
export default async function BlogPost({ 
  params,
}: { 
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  
  // 예시 데이터
  const post = {
    title: 'Next.js를 이용한 SEO 최적화',
    authorName: 'BLUECOOL',
    publishedAt: '2025-07-01T12:00:00+09:00',
    description: 'Next.js에서의 SEO 최적화 방법을 알아봅니다.',
    url: `https://pyomin.com/posts/${slug}`,
  };
  
  // JSON-LD 객체 생성 (schema.org 표준 규격 준수)
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    author: {
      '@type': 'Person',
      name: post.authorName,
      url: 'https://pyomin.com/about'
    },
    datePublished: post.publishedAt,
    description: post.description,
    url: post.url
  };
  
  return (
    <section>
      <script 
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify(jsonLd),
        }}
      />
      
      <article>
        <h1>{post.title}</h1>
        <p>{post.description}</p>
      </article>
    </section>
  );
}

JSON-LD에 포함된 정보는 실제 페이지 화면에 노출되는 콘텐츠와 일치해야 한다. 화면에 보이지 않는 숨겨진 데이터만 구조화 데이터로 제공하는 것은 검색 엔진 스팸 정책 위반으로 간주될 수 있으므로 주의해야 한다.

📐 웹사이트 성능 측정 도구 Lighthouse