Next.js와 Vercel로 구축하는 자바스크립트 기반의 멀티페이지 애플리케이션

10 Nov 2023

nextjs

지금까지 단일 페이지 웹 애플리케이션(SPA)이 주류인 현대 웹 개발에서 멀티페이지 애플리케이션(MPA)의 중요성이 새롭게 부각되고 있습니다. MPA는 각 페이지마다 독립적인 HTML 파일을 가지며, 네이티브 앱과 비슷한 사용자 경험을 제공할 수 있습니다. 이러한 MPA를 개발하기 위해서는 자바스크립트 기반의 프레임워크와 호스팅 플랫폼이 필요합니다. 이번 포스트에서는 Next.js 프레임워크와 Vercel 호스팅 플랫폼을 사용하여 자바스크립트 기반의 멀티페이지 애플리케이션을 구축하는 방법에 대해 알아보겠습니다.

Next.js란?

Next.js는 React를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원합니다. 이를 통해 우리는 서버에서 페이지를 렌더링하고 클라이언트에게 완성된 HTML을 전달할 수 있습니다. 이는 SPA와는 달리 페이지를 빠르게 로딩하고 SEO에 우수한 성능을 제공할 수 있습니다. 또한 Next.js는 멀티페이지 애플리케이션을 구축하기에 이상적인 프레임워크입니다.

Vercel이란?

Vercel은 Next.js 애플리케이션을 배포하기 위한 클라우드 기반 호스팅 플랫폼입니다. Vercel은 Git 저장소와의 연동, 자동 빌드 및 배포, 글로벌 CDN 기능, 커스텀 도메인 설정 등 다양한 기능을 제공하여 개발자가 신속하게 애플리케이션을 배포할 수 있습니다. Vercel을 사용하면 애플리케이션의 성능과 안정성을 보장할 수 있습니다.

Next.js와 Vercel을 사용한 멀티페이지 애플리케이션 구축하기

Next.js 프로젝트 생성하기: npx create-next-app 명령어로 프로젝트를 생성합니다. Next.js는 기본적으로 MPA를 지원하므로 추가적인 설정이 필요하지 않습니다.
페이지 생성하기: pages 폴더에 각각의 페이지를 생성합니다. 각 페이지는 독립적인 React 컴포넌트로 작성되며, 파일명은 페이지의 경로와 일치해야 합니다.
네비게이션 구현하기: 각 페이지 사이를 이동할 수 있는 네비게이션을 구현합니다. 이를 위해 Link 컴포넌트를 사용하고, href 속성에 페이지 경로를 지정합니다.
Vercel에 배포하기: Vercel 계정을 만들고, GitHub 레포지토리와 연동하여 애플리케이션을 배포합니다. Vercel은 자동으로 프로젝트를 빌드하고 CDN에 배포하여 애플리케이션의 성능을 향상시킵니다.

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Home Page</h1>
      <Link href="/about"><a>About</a></Link>
      <Link href="/contact"><a>Contact</a></Link>
    </div>
  );
}

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <Link href="/"><a>Home</a></Link>
      <Link href="/contact"><a>Contact</a></Link>
    </div>
  );
}

// pages/contact.js
import Link from 'next/link';

export default function Contact() {
  return (
    <div>
      <h1>Contact Page</h1>
      <Link href="/about"><a>About</a></Link>
      <Link href="/"><a>Home</a></Link>
    </div>
  );
}

이와 같이 Next.js와 Vercel을 사용하여 멀티페이지 애플리케이션을 구축할 수 있습니다. Next.js의 SSR 및 SSG 기능을 활용하여 각 페이지를 서버에서 렌더링하고, Vercel의 자동 빌드 및 배포 기능을 사용하여 애플리케이션을 신속하게 배포할 수 있습니다. 따라서 이 조합은 자바스크립트 기반의 멀티페이지 애플리케이션을 개발하는 데에 매우 유용한 솔루션입니다.

#Next.js #Vercel