基本的なデプロイを行ってみて,今後自分の開発したものを公開する手段を1つ獲得する.
https://developers.cloudflare.com/workers/framework-guides/web-apps/nextjs/ に従えばだいたいデプロイまでできる.
1. プロジェクトの作成
npm create cloudflare@latest -- my-next-app --framework=next
でプロジェクトを作成.
Initialize a new git repository? (Y/n)
gitで管理する場合はyes.
Would you like to deploy your project now? (Y/n)
作成したプロジェクトを即座にデプロイしたい場合はyes.
2. プロジェクトの編集
作成したプロジェクトを編集する.
npm run dev
により,ローカル環境で開発状況を確認しながら開発できる.
3. デプロイ
デプロイの前に
npm run preview
でより本番に近い環境でプレビューし,問題なければ,
npm run deploy
でデプロイする.
開発環境
- OS: Windows 11(WSL2 / Ubuntu)
- Node.js: v22.8.0
- npm: v10.8.2
- Framework: Next.js 16.1.5
- Library: React 19.1.5 / React DOM 19.1.5
- Hosting: Cloudflare Pages + Workers
- Build Tool: @opennextjs/cloudflare v1.17.1
- CLI: wrangler 4.69.0
- CSS: Tailwind CSS v4
- Language: TypeScript 5.7.4
- Editor: VS Code