[ Project3 / deploy ] Next js 14 배포 (Feat. Cloudflare + KV)

Cloudflare의 KV를 통해서 배포를 했다.

이틀은 배포하는 데 시간을 보낸거 같다. 그래도 일단 배포를 완료해서 기분이 좋다. 수정해야할 사항이 많긴 하다.

 

전체적인 프로세는 아래의 블로그를 통해서 진행했다.

https://dev.to/devarshishimpi/how-to-create-a-new-nextjs-project-with-cloudflare-pages-and-workers-43d9

How to create a new Next.js project with Cloudflare Pages and Workers

 

 

나의 프로젝트는 next 14 프로젝트가 완료된 시점으로 시작한다.

1. install next-on-page

npm install @cloudflare/next-on-pages

 

2. next.config 세팅하기

// next.config.mjs
import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev'

if (process.env.NODE_ENV === 'development') {
  await setupDevPlatform()
}

/** @type {import('next').NextConfig} */
const nextConfig = {}
export default nextConfig

 

3. wrangler.toml 세팅하기

name = "my-next-app"
compatibility_flags = ["nodejs_compat"]

[[kv_namespaces]]
binding = "MY_KV" // Name 이다.
id = "<YOUR_KV_NAMESPACE_ID>" // id는 그대로 id

kv가 뭔지 몰라서 몇 시간을 해맴

side menu(bar)

 

Workers & Pages 메뉴안에 2depth로 KV 확인 가능하다.

create a namespace를 통해서 KV 정보 값을 넣는다.

 

4. runtim => "edge"로 바꾸기

export const runtime = "edge";

설명

Next.js has two “runtimes” — “Edge” and “Node.js”. When you run your Next.js app on Cloudflare, you can use available Node.js APIs — but you currently can only use Next.js’ “Edge” runtime.
This means that for each server-rendered route — ex: an API route or one that uses getServerSideProps — you must configure it to use the “Edge” runtime:

Cloudeflare 내용

 

4-1. issue

둘은 같이 양립 할 수 없다. 따라서 'use server'는 삭제 필수

'use server'
export const runtime = 'edge';

 

둘이 같이 썼다가. 아래와 같은 오래 문구만 보고 async 다 넣었지만 안됨.

Error: "Only async functions are allowed to be exported in a 'use server' file"

 

해결책 참조

https://stackoverflow.com/questions/76957592/error-only-async-functions-are-allowed-to-be-exported-in-a-use-server-file

 

 

5. npm run deploy

npm run deploy

 

 

 

배포 성공!

 

 

원글

https://developers.cloudflare.com/pages/get-started/direct-upload/#wrangler-cli

Direct Upload | Cloudflare Pages docs

 

https://developers.cloudflare.com/pages/framework-guides/nextjs/ssr/get-started/

Get started | Cloudflare Pages docs