Next.js는 빠르고 효율적인 정적 사이트 퍼블리싱을 가능하게 하는 React 프레임워크입니다. 이번 가이드에서는 정적 페이지 생성(SSG)의 개념과 SEO 최적화 방법을 중심으로 실전 활용법을 알아보겠습니다.
1. 정적 사이트 퍼블리싱이란?
정적 사이트 퍼블리싱(Static Site Publishing)은 사전에 생성된 HTML 파일을 배포하여 빠른 로딩 속도를 제공하는 방식입니다. Next.js에서는 getStaticProps와 getStaticPaths를 활용해 **정적 페이지를 사전에 생성(SSG, Static Site Generation)**할 수 있습니다.
✔️ 정적 사이트 퍼블리싱의 장점:
- 빠른 로딩 속도: 사전 렌더링된 HTML을 제공하므로 페이지 로딩 속도가 빠름
- SEO 최적화에 유리: 검색 엔진이 쉽게 크롤링할 수 있는 정적 HTML 제공
- 서버 부담 감소: 요청마다 동적으로 생성하지 않기 때문에 서버 부하 감소
2. Next.js의 정적 페이지 생성(SSG) 방법
📌 기본 정적 페이지 생성 (getStaticProps)
Next.js에서 getStaticProps를 사용하면 빌드 시점에 데이터를 가져와 정적인 HTML을 생성할 수 있습니다.
export async function getStaticProps() {
const res = await fetch('<https://api.example.com/posts>');
const posts = await res.json();
return {
props: { posts },
};
}
export default function Blog({ posts }) {
return (
<div>
<h1>블로그 게시글</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
✔️ 이 코드의 특징:
getStaticProps()가 빌드 시점에 실행되며, API에서 데이터를 가져와 정적 HTML로 변환- 서버에 추가적인 요청 없이 사전 렌더링된 정적 페이지 제공
📌 동적 정적 페이지 생성 (getStaticPaths)
동적인 URL이 필요한 경우 getStaticPaths를 활용하면 사전에 여러 개의 정적 페이지를 생성할 수 있습니다.
export async function getStaticPaths() {
const res = await fetch('<https://api.example.com/posts>');
const posts = await res.json();
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));
return { paths, fallback: false };
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://api.example.com/posts/${params.id}`);
const post = await res.json();
return {
props: { post },
};
}
export default function Post({ post }) {
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
✔️ 이 코드의 특징:
getStaticPaths()를 사용하여 특정 경로의 정적 페이지를 사전 생성getStaticProps()를 이용해 개별 페이지의 콘텐츠를 가져옴
3. 정적 사이트의 SEO 최적화 방법
🔹 (1) next/head를 활용한 메타 태그 설정
SEO 최적화를 위해서는 페이지마다 적절한 메타 태그를 설정해야 합니다.
import Head from 'next/head';
export default function Blog({ post }) {
return (
<>
<Head>
<title>{post.title} - 내 블로그</title>
<meta name="description" content={post.description} />
<meta property="og:title" content={post.title} />
<meta property="og:description" content={post.description} />
</Head>
<h1>{post.title}</h1>
<p>{post.content}</p>
</>
);
}
✔️ SEO 최적화 포인트:
title태그를 동적으로 설정하여 검색 엔진 노출 강화meta description을 설정해 검색 결과에서 적절한 미리보기 제공- Open Graph 태그를 추가해 SNS 공유 시 미리보기 정보 최적화
🔹 (2) 이미지 최적화 (next/image) 활용
Next.js의 next/image를 사용하면 자동으로 이미지 최적화가 가능합니다.
import Image from 'next/image';
export default function Profile() {
return (
<Image
src="/profile.jpg"
alt="프로필 이미지"
width={200}
height={200}
priority
/>
);
}
✔️ next/image의 장점:
- 자동 최적화: WebP 변환 및 로딩 속도 개선
- Lazy Loading 지원: 필요한 경우에만 이미지 로드
🔹 (3) 정적 사이트에 맞는 Sitemap 및 robots.txt 설정
검색 엔진이 사이트를 잘 크롤링할 수 있도록 sitemap.xml과 robots.txt를 설정해야 합니다.
1️⃣ Sitemap 생성 (next-sitemap 사용)
npm install next-sitemap
// next-sitemap.js
module.exports = {
siteUrl: '<https://yourwebsite.com>',
generateRobotsTxt: true,
};
2️⃣ robots.txt 설정
User-agent: * Disallow: Sitemap: <https://yourwebsite.com/sitemap.xml>
✔️ 검색 엔진이 사이트 구조를 빠르게 인덱싱할 수 있도록 도와줌
4. 정적 사이트 배포 방법
🔹 (1) Vercel을 이용한 배포
Next.js는 Vercel에서 제공하는 무료 호스팅을 지원하며, 간단한 명령어로 배포가 가능합니다.
npm run build vercel deploy
✔️ 자동 CI/CD 지원 → GitHub에 푸시하면 자동 배포됨
🔹 (2) Netlify를 이용한 배포
Netlify에서도 정적 사이트를 쉽게 배포할 수 있습니다.
1️⃣ GitHub 연동 후 빌드 설정
- 빌드 명령어:
npm run build - 배포 폴더:
.next
2️⃣ 환경 변수 설정 (NEXT_PUBLIC_ 접두사 사용)
NEXT_PUBLIC_API_URL=https://api.example.com
| 항목 | 내용 |
|---|---|
| SSG 사용법 | getStaticProps()와 getStaticPaths() 활용 |
| SEO 최적화 | next/head를 활용한 메타 태그, next/image를 활용한 이미지 최적화 |
| 사이트 인덱싱 | next-sitemap으로 Sitemap 생성, robots.txt 설정 |
| 배포 | Vercel 또는 Netlify로 간편 배포 |
✅ Next.js의 정적 사이트 퍼블리싱을 활용하면, 빠른 로딩 속도와 강력한 SEO 최적화를 동시에 구현할 수 있습니다. 🚀
