Next.js는 React 기반의 프레임워크로서, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 쉽게 구현할 수 있도록 도와줍니다. 이 글에서는 Next.js의 동적 라우팅 및 페이지 생성 기능에 대해 자세히 설명하고, getStaticPaths와 getStaticProps의 사용법에 대해 알아보겠습니다.

1. 동적 라우팅이란?

동적 라우팅은 URL 경로의 일부가 동적으로 생성되거나 변화하는 라우팅 방식을 의미합니다. 예를 들어, 블로그 게시물의 URL이 /posts/[id]와 같이 특정 ID에 따라 변경될 경우, 이를 동적 라우팅이라고 합니다. Next.js에서는 파일 시스템 기반의 라우팅 시스템을 사용하여 동적 라우팅을 매우 간편하게 구현할 수 있습니다.

2. Next.js의 동적 라우팅 구현하기

Next.js에서는 동적 라우트를 만들기 위해 대괄호([])를 사용하여 파일 및 폴더 이름을 지정합니다. 예를 들어, pages/posts/[id].js라는 파일을 생성하면, /posts/1, /posts/2와 같은 URL을 처리할 수 있습니다.

 
// pages/posts/[id].js

import { useRouter } from 'next/router';

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

    return (
        

            
Post ID: {id}
        
    );
};

export default Post;

위 코드는 동적 URL에서 가져온 ID를 화면에 표시하는 간단한 컴포넌트입니다. 그러나 실제 애플리케이션에서는 데이터 fetching이 필요합니다. 이를 위해 getStaticPaths와 getStaticProps를 사용하게 됩니다.

3. getStaticPaths와 getStaticProps 소개

getStaticPaths는 Next.js에게 어떤 경로를 미리 생성해야 하는지 알려주는 함수입니다. 이 함수는 동적 라우팅을 사용할 때 미리 렌더링할 경로의 목록을 제공하는 역할을 합니다. 반면에 getStaticProps는 특정 페이지를 미리 생성할 때 필요한 데이터를 가져오는 데 사용됩니다.

4. getStaticPaths 사용하기

우선 getStaticPaths를 사용하여 미리 생성할 경로를 정의해보겠습니다. 다음은 예시 코드입니다.

 
// pages/posts/[id].js

export async function getStaticPaths() {
    // 예시 데이터를 배열로 정의
    const posts = [
        { id: '1' },
        { id: '2' },
        { id: '3' }
    ];

    // paths 배열 형태로 경로 정의
    const paths = posts.map(post => ({
        params: { id: post.id }
    }));

    return { paths, fallback: false };
}

위 코드에서 getStaticPaths는 ID가 1, 2, 3인 게시물 경로를 정의했습니다. fallback: false 설정은 정의된 경로 외의 요청이 들어오면 404 페이지를 반환하게 합니다.

5. getStaticProps 사용하기

그런 다음, getStaticProps를 사용하여 각 게시물에 대한 데이터를 가져오겠습니다. 아래는 이에 대한 코드입니다.

 
// pages/posts/[id].js

export async function getStaticProps({ params }) {
    const { id } = params;

    // 여기에 실제 데이터 fetching 로직을 넣을 수 있습니다.
    const posts = [
        { id: '1', title: '첫 번째 게시물', content: '내용 1' },
        { id: '2', title: '두 번째 게시물', content: '내용 2' },
        { id: '3', title: '세 번째 게시물', content: '내용 3' }
    ];
    
    const post = posts.find(post => post.id === id);

    return {
        props: {
            post
        },
    };
}

위 코드에서는 게시물 ID에 해당하는 게시물을 찾아서 그 데이터를 props로 반환합니다. 이제 게시물 내용을 출력할 수 있도록 컴포넌트를 수정하겠습니다.

 
// pages/posts/[id].js

const Post = ({ post }) => {
    return (
        

            
{post.title}
            
{post.content}
        
    );
};

export default Post;

6. 전체 코드

위의 모든 내용을 통합하면 최종 코드는 다음과 같습니다.

 
// pages/posts/[id].js

import { useRouter } from 'next/router';

export async function getStaticPaths() {
    const posts = [
        { id: '1' },
        { id: '2' },
        { id: '3' }
    ];

    const paths = posts.map(post => ({
        params: { id: post.id }
    }));

    return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
    const { id } = params;

    const posts = [
        { id: '1', title: '첫 번째 게시물', content: '내용 1' },
        { id: '2', title: '두 번째 게시물', content: '내용 2' },
        { id: '3', title: '세 번째 게시물', content: '내용 3' }
    ];
    
    const post = posts.find(post => post.id === id);

    return {
        props: {
            post
        },
    };
}

const Post = ({ post }) => {
    return (
        

            
{post.title}
            
{post.content}
        
    );
};

export default Post;

7. 결론

이번 글에서는 Next.js에서 동적 라우팅을 구현하는 방법과 getStaticPaths 및 getStaticProps의 사용법에 대해 알아보았습니다. 이러한 기능을 활용하면 미리 정의된 경로에 대해 정적 페이지를 생성하고, 각 페이지에 필요한 데이터를 효과적으로 가져올 수 있습니다. 이를 통해 성능과 SEO 최적화를 이룰 수 있습니다.

Next.js는 강력한 기능을 제공하여, 대규모 애플리케이션의 개발을 더욱 간편하게 만들어 줍니다. 본 문서를 통해 Next.js의 동적 라우팅과 페이지 생성을 위한 첫 발을 내딛는 데 도움이 되었기를 바랍니다. 앞으로도 더욱 다양한 Next.js의 기능을 활용해 보시길 추천드립니다.