동적 라우트와 getStaticPaths 사용하기: 블로그 포스트를 위한 경로 생성 방법

동적인 웹 페이지는 모든 현대적인 웹 애플리케이션의 핵심 요소입니다. 특히 블로그 포스트와 같이 유연하고 변경이 잦은 콘텐츠를 관리할 때 동적 라우트는 꼭 필요한 기능입니다. 이 글에서는 Next.js에서 동적 라우트와 getStaticPaths를 사용하는 방법을 집중적으로 다루겠습니다. 이 과정을 통해 동적인 블로그 포스트를 생성하고, 이를 최적화된 방식으로 사용자에게 제공하는 방법을 알아보겠습니다.

동적 라우트란 무엇인가?

동적 라우트는 URL 경로가 고정되지 않고, 변경 가능한 경로를 지칭합니다. 예를 들어, 블로그 애플리케이션에는 여러 개의 포스트가 존재하며, 각각의 포스트는 고유한 ID나 슬러그(slug)를 가집니다. 이를 통해 /posts/[slug]와 같은 형태의 동적 경로를 생성할 수 있습니다. 동적 라우트를 사용하면 각 포스트마다 개별적인 페이지를 만들어낼 필요 없이 하나의 라우트에서 다양한 콘텐츠를 처리할 수 있습니다.

다음은 기본적인 동적 라우트 예제입니다.

jsx
// pages/posts/[slug].js
import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { slug } = router.query

  return (
    <div>
      <h1>{slug} 페이지입니다</h1>
    </div>
  )
}

export default Post

위의 코드에서는 useRouter 훅을 사용해 URL에서 슬러그를 추출하고 있습니다. 이 슬러그를 통해 각 포스트 페이지를 동적으로 렌더링할 수 있습니다.

getStaticPaths의 기본 개념

getStaticPaths는 빌드 타임에 미리 렌더링할 동적 경로를 정의하는 함수입니다. 이것은 Next.js에서 정적 사이트 생성(Static Site Generation, SSG)을 수행할 때 중요한 역할을 합니다. getStaticPaths를 구현하면 Next.js는 제공된 경로 목록을 기반으로 정적 페이지를 생성합니다.

다음은 getStaticPaths의 기본 예제입니다.

jsx
// pages/posts/[slug].js
export async function getStaticPaths() {
  const paths = [
    { params: { slug: 'post-1' } },
    { params: { slug: 'post-2' } },
  ]

  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  // 이 부분에서 데이터를 가져옵니다
  const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(res => res.json())

  return { props: { post } }
}

위 코드에는 getStaticPaths가 돌려주는 paths 배열이 있습니다. 이 배열에는 슬러그에 해당하는 여러 경로가 정의되어 있으며, Next.js는 이를 바탕으로 정적 페이지를 사전 생성합니다. fallback 속성을 false로 설정하면, getStaticPaths에서 반환되지 않은 경로는 404 페이지로 렌더링됩니다.

블로그 포스트 예제: getStaticPaths 및 getStaticProps 통합하기

이제 구체적인 예제를 통해 동적 라우트와 getStaticPaths를 통합해 보겠습니다. 예를 들어, 블로그 포스트 데이터를 가져와서 이를 동적으로 렌더링하는 과정을 살펴보겠습니다.

먼저, 블로그 포스트 데이터가 저장된 posts 디렉토리가 있다고 가정해 보겠습니다. 각 포스트는 JSON 파일로 저장되어 있습니다. 이를 가져와서 동적 라우트와 통합해 보겠습니다.

jsx
// lib/posts.js
import fs from 'fs'
import path from 'path'

const postsDirectory = path.join(process.cwd(), 'posts')

export function getAllPostSlugs() {
  const filenames = fs.readdirSync(postsDirectory)
  return filenames.map(filename => {
    return {
      params: {
        slug: filename.replace(/\.json$/, '')
      }
    }
  })
}

export function getPostData(slug) {
  const filePath = path.join(postsDirectory, `${slug}.json`)
  const fileContents = fs.readFileSync(filePath, 'utf8')
  return JSON.parse(fileContents)
}

위 코드는 posts 디렉토리에 있는 모든 JSON 파일을 읽어서 슬러그 목록을 반환하는 함수와, 특정 슬러그에 해당하는 포스트 데이터를 반환하는 함수를 정의합니다.

다음으로, getStaticPaths와 getStaticProps를 활용한 동적 페이지를 구현해 보겠습니다.

jsx
// pages/posts/[slug].js
import { getAllPostSlugs, getPostData } from '../../lib/posts'

export async function getStaticPaths() {
  const paths = getAllPostSlugs()
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const postData = getPostData(params.slug)
  return { props: { postData } }
}

const Post = ({ postData }) => {
  return (
    <div>
      <h1>{postData.title}</h1>
      <div>{postData.content}</div>
    </div>
  )
}

export default Post

위 코드에서는 lib/posts.js에서 정의한 함수들을 사용하여 getStaticPaths와 getStaticProps를 구현했습니다. getStaticPaths는 모든 슬러그를 기반으로 경로 목록을 생성하고, getStaticProps는 각 경로에 대해 관련 데이터를 가져옵니다.

위와 같이 하면, 빌드 시에 블로그 포스트 페이지가 정적으로 생성되며, 각 포스트마다 동적인 경로를 가집니다. 또한, 이렇게 생성된 페이지는 매우 빠르게 로드되며, SEO 최적화에도 유리합니다.

결론

이번 글에서는 Next.js에서 동적 라우트를 생성하고 getStaticPaths를 사용하여 정적 페이지를 만드는 방법에 대해 알아보았습니다. 이러한 방법을 사용하면, 동적인 콘텐츠를 효과적으로 관리하면서도 성능과 SEO 측면에서 최적화된 웹 사이트를 구축할 수 있습니다. 특히 블로그와 같은 콘텐츠 중심의 웹 애플리케이션에서는 이러한 기법들이 매우 유용합니다. Next.js의 기능을 잘 활용하여 효율적이고 빠른 웹 페이지를 만들어 보세요.