Next.js에서 CDN 활용하기

18 Oct 2023

nextjs

CDN(Content Delivery Network)은 웹 페이지의 정적 파일(이미지, 스타일시트, 자바스크립트 파일 등)을 전 세계적으로 분산된 서버에 저장하여 사용자에게 빠른 속도로 전달해주는 서비스입니다. Next.js 프로젝트에서 CDN을 활용하면 웹 페이지의 성능을 향상시킬 수 있습니다. 다음은 Next.js에서 CDN을 활용하는 방법에 대한 안내입니다.

1. package.json 수정하기

먼저, Next.js 프로젝트의 package.json 파일을 열고 scripts 섹션에 다음과 같이 build 명령어를 추가해줍니다.

"scripts": {
  "build": "next build && next export"
}

build 명령어는 Next.js 애플리케이션을 빌드하고 정적 파일을 생성하는 명령어입니다.

2. 정적 파일 CDN에 업로드하기

Next.js에서 생성된 정적 파일을 CDN에 업로드하기 위해서는 CDN 제공업체의 계정을 만들고 관련 설정을 해야합니다. 대부분의 CDN 제공업체는 콘솔 또는 API를 통해 파일 업로드 기능을 제공합니다. 이를 통해서 Next.js에서 생성된 정적 파일을 CDN에 업로드해줍니다.

3. Next.js 페이지에서 CDN 사용하기

CDN에 업로드된 정적 파일을 Next.js 페이지에서 사용하기 위해서는 next/head 모듈을 이용하여 페이지의 <head> 섹션에 다음과 같이 CDN URL을 추가해줍니다.

import Head from 'next/head';

const MyPage = () => {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="https://cdn.example.com/my-style.css" />
        <script src="https://cdn.example.com/my-script.js"></script>
      </Head>
      <div>
        {/* 페이지 내용 */}
      </div>
    </>
  );
}

위의 예제에서는 https://cdn.example.com/my-style.css 경로에 있는 스타일시트 파일과 https://cdn.example.com/my-script.js 경로에 있는 자바스크립트 파일을 CDN을 통해 불러오고 있습니다.

CDN을 활용하면 정적 파일을 더 빠르게 로드할 수 있으며, 웹 페이지의 성능을 개선할 수 있습니다. 하지만, CDN을 사용할 때에는 의존성 관리와 버전 관리에 주의해야합니다.

참고 자료: