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
────────────────────────────────────────────────────────────