CloudFlare Pages로 Next.js 서비스 배포하기

CloudFlare의 정적사이트 플랫폼인 CloudFlare Pages가 출시되었다.

https://pages.cloudflare.com/

이미 Netlify 와 같이 정적 사이트 플랫폼이 많은데 굳이 CloudFlare를 써야하나? 싶었다.
(저도 그동안은 Netlify을 썼기 때문에)

그럼에도 써봐야하는 이유는 Free Plan의 구성이 말도 안되게 좋기 때문이다.

무제한 사이트 발행
무제한 요청
무제한 대역폭

Free Plan 라고는 믿을수 없을만큼의 좋은 혜택을 제공한다.
대부분의 정적 사이트가 저정도 혜택은 유료 Plan인걸 고려하면 선택하지 않을 이유가 전혀 없다고 생각했다.

1. Next.js App 생성

먼저 간단한 Next.js App을 생성한다.

여기서 사용된 코드는 모두 Github 에 있다.

npx create-next-app react-in-action --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

react-in-action 으로 프로젝트를 생성한다.

이렇게 생성된 샘플 프로젝트에 아래 2가지 설정을 추가한다.

1-1. export 추가

생성된 프로젝트의 package.json 을 열어서 아래와 같이 build 에 next export 를 추가한다

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build && next export",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  }
}

build 한 결과물을 static HTML로 추출하기 위해 export 명령어를 추가한다.

추가되었다면 아래 명령어로 잘 작동하는지 확인한다

yarn build

npm을 쓴다면 npm run build

yarn run v1.22.10
$ next build && next export
...
info  - Copying "static build" directory
info  - No "exportPathMap" found in "undefined". Generating map from "./pages"
info  - Launching 11 workers
info  - Copying "public" directory
info  - Exporting (2/2)
Export successful. Files written to /Users/jojoldu/git/react-in-action/out
✨  Done in 4.31s.

성공적으로 build 와 export가 되었다면 아래와 같이 out 디렉토리가 생성되야만 한다.