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

SEO(Search Engine Optimization)는 웹 애플리케이션의 트래픽을 좌우하는 핵심 요소다. React의 기본 렌더링 방식인 CSR(Client-Side Rendering)만으로는 검색 엔진 크롤러에게 제대로 노출하기 어렵다.

Next.js를 활용하면 크롤러가 콘텐츠를 빠짐없이 수집하고, 검색 결과에도 정확히 노출되는 페이지를 만들 수 있다.

1. 렌더링 전략 최적화

검색 엔진 크롤러(Googlebot, Yeti 등)는 페이지에 접근하면 먼저 HTML 문서를 읽고 콘텐츠를 분석한다. CSR 방식은 클라이언트에서 자바스크립트가 실행된 후에야 화면이 완성되므로 초기 HTML이 비어 있을 수 있다. 이 경우 크롤러가 콘텐츠를 제대로 인식하지 못하거나 인덱싱이 지연될 수 있다.

반면 서버에서 미리 완성된 HTML을 제공하면 크롤러가 즉시 콘텐츠를 수집할 수 있어 SEO에 유리하다. Next.js는 상황에 맞게 선택할 수 있는 여러 렌더링 전략을 지원한다.

SSR (Server-Side Rendering)

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

SSR은 다음과 같이 구현할 수 있다.

[캐싱 비활성화를 통한 동적 렌더링 유도]
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>
}

[동적 함수 사용]
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>;
}​

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

export const dynamic = 'force-dynamic';

SSG (Static Site Generation)

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

데이터 패칭 유무와 라우트 형태에 따라 다음과 같이 구현할 수 있다.

[데이터 패칭이 없는 페이지]
fetch 함수나 동적 함수를 사용하지 않는 순수 UI 컴포넌트는 별도 설정 없이도 빌드 시점에 정적 HTML로 생성된다.

[데이터 패칭이 포함된 페이지]
API 등 외부 데이터를 호출해 페이지를 구성할 때 빌드 시점 데이터를 정적 페이지로 고정하려면 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>;
}

[동적 라우트 페이지]
[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),
  }));
}

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

export const dynamic = 'force-static';

ISR (Incremental Static Regeneration)

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

ISR은 다음과 같이 구현할 수 있다.

[시간 기반 재검증]
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>;
}

[온디맨드 재검증]
시간 주기에 의존하지 않고 데이터가 변경된 즉시 캐시를 수동으로 무효화하는 방식이다. fetch 요청에 태그를 지정한 뒤, 데이터가 업데이트되는 시점에 라우트 핸들러 등에서 revalidateTag 또는 revalidatePath를 호출한다.

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

// 2. 데이터 수정 시 태그 기반으로 캐시 무효화
import { revalidateTag } from 'next/cache';

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

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

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

페이지 단위의 라우트 세그먼트 설정과 컴포넌트 내부 fetch 함수의 개별 캐시 설정이 함께 있으면 더 짧은 재검증 주기를 라우트 전체의 기준으로 병합해 적용한다.

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

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

정적 메타데이터

페이지의 메타데이터가 고정돼 있을 때 사용한다. 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 비동기 함수를 통해 메타데이터 객체를 동적으로 생성한다.

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}`,
    },
  };
}​

generateMetadata 내부의 fetch 요청과 페이지 컴포넌트가 동일한 API를 호출하는 경우 Next.js가 자동으로 요청을 메모이제이션하여 실제 네트워크 요청은 한 번만 수행된다.

메타데이터 템플릿

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

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

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

웹 애플리케이션 내 모든 유효한 URL 목록과 각 페이지의 마지막 수정일, 변경 빈도, 중요도를 검색 엔진에 제공해 인덱싱 효율을 높일 수 있다.

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];
}​

4. 이미지 최적화

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

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

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>
  );
}

페이지에서 가장 큰 비중을 차지하는 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에 포함된 정보는 실제 페이지 화면에 노출되는 콘텐츠와 일치해야 한다. 화면에 보이지 않는 숨겨진 데이터만 구조화된 데이터로 제공하면 검색 엔진 스팸 정책 위반으로 간주될 수 있다.