Closed5

Deploy a Next.js site to Cloudflare

hanetsukihanetsuki
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.
hanetsukihanetsuki

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'
      }
    }
  )
}

https://nextjs.org/docs/advanced-features/react-18/switchable-runtime

hanetsukihanetsuki

Deploy with Cloudflare Pages

  1. Cloudflareのダッシュボードにログインします。
  2. アカウントホームで、[ページ] > [プロジェクトの作成]を選択します。
  3. 作成した新しいGitHubリポジトリを選択し、Set up builds and deploymentsセクションで、FrameworkプリセットとしてNext.jsを選択します。選択すると、以下の情報が表示されます。
Configuration option Value
プロダクション ブランチ main
ビルド コマンド npx @cloudflare/next-on-pages --experimental-minify
ビルド出力ディレクトリ .vercel/output/static
  1. Next.jsを正常にビルドするには、Node.jsのv14以降が必要です。Nodeのバージョンを設定するには、Pagesプロジェクト設定 > 環境変数 で、NODE_VERSIONの変数を14以上の値で追加してください。
hanetsukihanetsuki

Preview your site

サイトをデプロイすると、*.pages.devにあなたのプロジェクト用の一意のサブドメインが与えられます。Next.js サイトに新しいコードをコミットするたびに、Cloudflare Pages は自動的にプロジェクトを再構築し、デプロイします。また、新しいプルリクエストのプレビューデプロイメントにアクセスできるので、本番環境にデプロイする前に、サイトの変更点を確認することができます。

このスクラップは2023/06/10にクローズされました