Cloudflare Pages로 Next.js 프로젝트 배포하기

2025-05-15

Cloudflare Pages로 Next.js 프로젝트를 배포하는 방법을 알아봅니다.

Cloudflare Pages 공식 문서를 바탕으로 작성되었습니다.

next-on-pages 설치
wrangler.jsonc 파일 추가
next.config.mjs 파일 수정
package.json 파일 수정
.nvmrc 파일 추가
Cloudflare 접속

next-on-pages 설치

pnpm add --save-dev @cloudflare/next-on-pages

Cloudflare Pages에서 Next.js를 배포하기 위해서는 next-on-pages를 설치해야 합니다.

wrangler.jsonc 파일 추가

wrangler.jsonc

{
  "name": "my-app",
  "compatibility_date": "2024-09-23",
  "compatibility_flags": [
    "nodejs_compat"
  ],
  "pages_build_output_dir": ".vercel/output/static"
}

그리고 wrangler.jsonc 파일을 추가합니다. wrangler.jsonc를 통해 Pages 프로젝트를 구상하고, 바인딩을 통해 액세스할 수 있는 리소스를 정의합니다.

next.config.mjs 파일 수정

next.config.mjs

import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';
 
/** @type {import('next').NextConfig} */
const nextConfig = {};
 
 if (process.env.NODE_ENV === 'development') {
   await setupDevPlatform();
 }
 
export default nextConfig;

다음으로 next.config.mjs 파일을 수정합니다.

package.json 파일 수정

package.json

"scripts": {
    "pages:build": "pnpm dlx @cloudflare/next-on-pages@1",
    "preview": "pnpm run pages:build && wrangler pages dev",
    "deploy": "pnpm run pages:build && wrangler pages deploy"
}