Next.js는 React 기반의 프레임워크로서 SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성) 기능을 제공합니다. 이러한 기능을 활용하면 사용자 경험을 극대화하고 SEO(검색 엔진 최적화)를 개선할 수 있습니다. 본 글에서는 Next.js에서 동적 라우팅과 페이지 생성 방법을 자세히 살펴보도록 하겠습니다.
1. Next.js의 라우팅 개요
Next.js의 라우팅은 파일 기반 시스템으로 작동합니다. 페이지 파일(예: .js, .ts)은 pages 디렉토리 내에 생성되며, 각 파일의 경로가 URL 경로와 매핑됩니다. 이러한 방식은 개발자가 쉽게 페이지를 추가하고 관리할 수 있도록 돕습니다.
Next.js에서는 두 가지 유형의 페이지를 생성할 수 있습니다: 정적 페이지와 동적 페이지. 정적 페이지는 미리 생성된 HTML로서, 주로 변하지 않는 데이터를 표시하는 데 적합합니다. 동적 페이지는 URL 파라미터를 기반으로 데이터를 불러오는 페이지로서, 사용자가 입력한 값에 따라 변화하는 내용을 표시합니다.
2. 정적 페이지 생성
정적 페이지는 getStaticProps 메서드를 통해 데이터를 가져와서 미리 생성할 수 있습니다. 이 메서드는 빌드 시간에 실행되며, 페이지가 요청될 때 HTML 페이지가 즉시 제공됩니다.
export async function getStaticProps() {
const res = await fetch('https://api.example.com/data');
const data = await res.json();
return {
props: {
data,
},
};
}
const StaticPage = ({ data }) => {
return (
<div>
<h1>정적 페이지</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
export default StaticPage;
위의 예제에서 getStaticProps는 API로부터 데이터를 가져와서 페이지 컴포넌트에 props로 전달합니다. 이 페이지는 빌드 시에만 생성되며, 매번 요청 시마다 데이터가 업데이트되지 않습니다.
3. 동적 페이지 생성
동적 페이지는 URL 경로의 일부에 변수를 사용하여 생성할 수 있습니다. 이러한 경우, getStaticPaths 메서드와 함께 사용됩니다. 이 메서드는 동적으로 생성할 페이지의 경로를 반환합니다.
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/items');
const items = await res.json();
const paths = items.map(item => ({
params: { id: item.id.toString() }
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/items/${params.id}`);
const data = await res.json();
return {
props: {
data,
},
};
}
const DynamicPage = ({ data }) => {
return (
<div>
<h1>동적 페이지 - {data.title}</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
};
export default DynamicPage;
getStaticPaths는 동적으로 생성할 페이지의 경로를 미리 정의합니다. 각 경로는 getStaticProps를 통해 해당 페이지에 필요한 데이터를 가져오는 데 사용됩니다. 이 구조를 통해 SEO 최적화가 가능하며, 사용자에게는 빠른 페이지 로딩 경험을 제공합니다.
4. 동적 라우팅 실습
이제 간단한 예제를 통해 동적 라우팅을 실습해보겠습니다. 여기서는 ‘상품’ 목록과 각 상품의 상세 정보를 보여주는 간단한 웹 애플리케이션을 만들어 보겠습니다.
4.1 폴더 구조
/pages
/products
[id].js
index.js
4.2 상품 목록 페이지
export async function getStaticProps() {
const res = await fetch('https://api.example.com/products');
const products = await res.json();
return {
props: {
products,
},
};
}
const Products = ({ products }) => {
return (
<div>
<h1>상품 목록</h1>
<ul>
{products.map(product => (
<li key={product.id}>
<a href={`/products/${product.id}`}>{product.name}</a>
</li>
))}</ul>
</div>
);
};
export default Products;
위의 코드는 상품 목록을 표시하는 페이지입니다. 각 상품은 링크로 연결되어 있습니다. 사용자가 링크를 클릭하면 해당 상품의 상세 페이지로 이동합니다.
4.3 상품 상세 페이지
export async function getStaticPaths() {
const res = await fetch('https://api.example.com/products');
const products = await res.json();
const paths = products.map(product => ({
params: { id: product.id.toString() }
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/products/${params.id}`);
const product = await res.json();
return {
props: {
product,
},
};
}
const ProductPage = ({ product }) => {
return (
<div>
<h1>상품 상세 페이지 - {product.name}</h1>
<p>가격: {product.price}</p>
<p>설명: {product.description}</p>
</div>
);
};
export default ProductPage;
상품의 상세 페이지는 URL 파라미터를 통해 특정 상품의 정보를 보여줍니다. 사용자가 상품 목록에서 링크를 클릭하면 해당 상품의 정보를 불러와 화면에 렌더링합니다.
5. 동적 라우팅의 이점
동적 라우팅은 많은 양의 페이지를 자동으로 생성할 수 있는 유용한 방법입니다. 예를 들어, 블로그 포스트, 상품 목록, 사용자 프로필 등 다양한 유형의 콘텐츠에 적용할 수 있습니다.
또한, SSR 및 SSG 기능을 활용하여 SEO 최적화와 빠른 페이지 로딩 속도를 동시에 달성할 수 있습니다.
6. 결론
Next.js는 파일 기반 라우팅을 통해 동적 페이지 생성 방식을 제공하여 개발자가 효율적으로 애플리케이션을 구축할 수 있도록 도와줍니다.
본 글에서는 정적 페이지와 동적 페이지 생성의 차이점, 그리고 각각의 생성 방법을 소개했습니다. 동적 라우팅 이론과 예제를 통해 여러분의 Next.js 프로젝트에 도움이 되기를 바랍니다.
Next.js의 동적 페이지 생성 기능을 잘 활용하면 SEO와 사용자 경험 모두를 향상시킬 수 있으며, 다양한 웹 애플리케이션의 요구에 맞출 수 있습니다. 더 많은 내용을 알고 싶으시다면 공식 문서를 참조하시기 바랍니다.