Open2
Opennextを使ってみる

こちらに従って進める

next-cf-workers-test
というアプリ名で作ってみる
pnpm create cloudflare@latest next-cf-workers-test --framework=next
.../19886a1b431-f1ff | +1 +
.../19886a1b431-f1ff | Progress: resolved 1, reused 0, downloaded 1, added 1, done
──────────────────────────────────────────────────────────────────────────────────────────────────────────
👋 Welcome to create-cloudflare v2.50.8!
🧡 Let's get started.
📊 Cloudflare collects telemetry about your usage of Create-Cloudflare.
Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md
──────────────────────────────────────────────────────────────────────────────────────────────────────────
╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./next-cf-workers-test
│
├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework Next.js
│
├ Select your deployment platform
│ platform Workers with Assets
│
├ Continue with Next.js via `pnpm dlx create-next-app@15.3.5 next-cf-workers-test`
│
Packages: +1
+
Progress: resolved 1, reused 0, downloaded 1, added 1, done
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack for `next dev`? … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes
✔ What import alias would you like configured? … ~/*
Creating a new Next.js app in /Users/xxxxx/Documents/code/next-project/next-cf-workers-test.
Using pnpm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
Installing devDependencies:
- typescript
- @types/node
- @types/react
- @types/react-dom
- @tailwindcss/postcss
- tailwindcss
- eslint
- eslint-config-next
- @eslint/eslintrc
╭───────────────────────────────────────────────╮
│ │
│ Update available! 10.12.4 → 10.14.0. │
│ Changelog: https://pnpm.io/v/10.14.0 │
│ To update, run: corepack use pnpm@10.14.0 │
│ │
╰───────────────────────────────────────────────╯
Downloading next@15.3.5: 27.79 MB/27.79 MB, done
Downloading @img/sharp-libvips-darwin-x64@1.2.0: 8.17 MB/8.17 MB, done
Downloading @next/swc-darwin-x64@15.3.5: 43.83 MB/43.83 MB, done
Packages: +330
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 400, reused 269, downloaded 66, added 330, done
dependencies:
+ next 15.3.5 (15.4.6 is available)
+ react 19.1.1
+ react-dom 19.1.1
devDependencies:
+ @eslint/eslintrc 3.3.1
+ @tailwindcss/postcss 4.1.11
+ @types/node 20.19.9 (24.2.0 is available)
+ @types/react 19.1.9
+ @types/react-dom 19.1.7
+ eslint 9.32.0
+ eslint-config-next 15.3.5 (15.4.6 is available)
+ tailwindcss 4.1.11
+ typescript 5.9.2
╭ Warning ───────────────────────────────────────────────────────────────────────────────────╮
│ │
│ Ignored build scripts: @tailwindcss/oxide, sharp, unrs-resolver. │
│ Run "pnpm approve-builds" to pick which dependencies should be allowed to run scripts. │
│ │
╰────────────────────────────────────────────────────────────────────────────────────────────╯
Done in 11.2s using pnpm v10.12.4
Initialized a git repository.
Success! Created next-cf-workers-test at /Users/xxx/Documents/code/next-project/next-cf-workers-test
A new version of `create-next-app` is available!
You can update by running: pnpm add -g create-next-app
├ Copying template files
│ files copied to project directory
│
╰ Application created
╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `pnpm install wrangler --save-dev`
│
├ Adding the Cloudflare adapter
│ installed @opennextjs/cloudflare)}
│
├ Updating `next.config.ts`
│ updated `next.config.ts`
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Updating `package.json` scripts
│ updated `package.json`
│
├ Generating types for your application
│ generated to `./cloudflare-env.d.ts` via `pnpm run cf-typegen`
│
├ Installing @types/node
│ installed via pnpm
│
├ Do you want to use git for version control?
│ yes git
│
├ Initializing git repo
│ initialized git
│
├ Committing new files
│ git commit
│
╰ Application configured
╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `pnpm run deploy`
│
╰ Done
────────────────────────────────────────────────────────────
🎉 SUCCESS Application created successfully!
💻 Continue Developing
Change directories: cd next-cf-workers-test
Start dev server: pnpm run dev
Deploy: pnpm run deploy
📖 Explore Documentation
https://developers.cloudflare.com/workers
🐛 Report an Issue
https://github.com/cloudflare/workers-sdk/issues/new/choose
💬 Join our Community
https://discord.cloudflare.com
────────────────────────────────────────────────────────────