Closed5
Deploy a Next.js site to Cloudflare
yarn create next-app nextjs-cloudflare
success Installed "create-next-app@13.0.6" with binaries:
- create-next-app
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
Creating a new Next.js app in /Users/username/repo/atelier/nextjs-cloudflare.
Using yarn.
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- eslint
- eslint-config-next
yarn add v1.22.17
info No lockfile found.
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 192 new dependencies.
Initializing project with template: default
Initialized a git repository.
Success! Created nextjs-cloudflare at /Users/username/repo/atelier/nextjs-cloudflare
✨ Done in 98.32s.
Configure the project to use the Edge Runtime
pages/api/hello.ts
// Next.js Edge API Routes: https://nextjs.org/docs/api-routes/edge-api-routes
import type { NextRequest } from 'next/server'
export const config = {
runtime: 'experimental-edge',
}
export default async function handler(req: NextRequest) {
return new Response(
JSON.stringify({ name: 'John Doe' }),
{
status: 200,
headers: {
'Content-Type': 'application/json'
}
}
)
}
Deploy with Cloudflare Pages
- Cloudflareのダッシュボードにログインします。
- アカウントホームで、[ページ] > [プロジェクトの作成]を選択します。
- 作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで、FrameworkプリセットとしてNext.jsを選択します。選択すると、以下の情報が表示されます。
Configuration option | Value |
---|---|
プロダクション ブランチ | main |
ビルド コマンド | npx @cloudflare/next-on-pages --experimental-minify |
ビルド出力ディレクトリ | .vercel/output/static |
- Next.jsを正常にビルドするには、Node.jsのv14以降が必要です。Nodeのバージョンを設定するには、Pagesプロジェクト設定 > 環境変数 で、NODE_VERSIONの変数を14以上の値で追加してください。
Preview your site
サイトをデプロイすると、*.pages.dev
にあなたのプロジェクト用の一意のサブドメインが与えられます。Next.js サイトに新しいコードをコミットするたびに、Cloudflare Pages は自動的にプロジェクトを再構築し、デプロイします。また、新しいプルリクエストのプレビューデプロイメントにアクセスできるので、本番環境にデプロイする前に、サイトの変更点を確認することができます。
このスクラップは2023/06/10にクローズされました