정적 사이트 생성은 최신 웹 개발 방법 중 하나로, 동적으로 데이터 처리가 필요하지 않은 단순한 웹 페이지를 생성하는 방법입니다. 이번 글에서는 Next.js와 Vercel을 사용하여 어떻게 정적 사이트를 생성할 수 있는지 알아보겠습니다.

Next.js란?

Next.js는 React 기반의 프레임워크로, 다양한 기능과 성능 향상을 제공하는 동시에 사용하기 쉬운 문법을 가지고 있습니다. 그 중에서도 Next.js의 정적 사이트 생성 기능은 페이지의 사전 렌더링을 통해 서버 요청을 최소화하여 빠른 페이지 로딩 속도를 제공합니다.

Vercel이란?

Vercel은 Next.js를 위한 호스팅 및 배포 플랫폼입니다. Vercel을 사용하면 Next.js 프로젝트를 간단하게 배포하고, 정적 사이트를 손쉽게 생성할 수 있습니다.

1. Next.js 프로젝트 생성하기

먼저 Next.js 프로젝트를 생성해야 합니다. 아래의 명령을 터미널에서 실행하여 Next.js 프로젝트를 생성합니다.

npx create-next-app my-static-site

위 명령을 실행하면 “my-static-site”라는 이름의 폴더가 생성되고, 해당 폴더에서 작업을 진행할 수 있습니다.

2. 정적 페이지 생성하기

Next.js에서 정적 페이지를 생성하기 위해서는 pages 폴더에 해당 페이지의 파일을 생성해야 합니다. 예를 들어, about.tsx라는 파일을 생성하여 pages 폴더에 저장합니다.

// about.tsx

import React from "react";

const About = () => {
  return <h1>About Page</h1>;
};

export default About;

위의 코드에서는 About 컴포넌트를 생성하여 About 페이지의 내용을 구성하였습니다.

3. Vercel에 프로젝트 배포하기

이제 Vercel을 사용하여 Next.js 프로젝트를 배포해보겠습니다. 먼저, Vercel CLI를 설치합니다.

npm i -g vercel

설치가 완료되면, 프로젝트 폴더에서 다음 명령을 실행하여 Vercel 로그인을 합니다.

vercel login

로그인이 완료되면, 다음 명령을 실행하여 프로젝트를 배포합니다.

vercel --prod

배포가 완료되면 Vercel에서 해당 프로젝트의 URL을 확인할 수 있습니다.

마무리

이제 Next.js와 Vercel을 사용하여 간단한 정적 사이트를 생성해 보았습니다. Next.js를 사용하면 동적 사이트 개발에도 유용하게 활용할 수 있습니다. 참고로, Vercel을 통해 배포된 사이트는 높은 성능과 빠른 속도를 제공합니다.

References:

• Next.js 공식 문서: https://nextjs.org/docs
• Vercel 공식 문서: https://vercel.com/docs

#Next.js #Vercel