Closed3
Cloudflare on NextJS +

Cloudflareへログイン
先にCloudflareへのログインをwrangler
で済ませておきます。
$ wrangler login
⛅️ wrangler 3.1.2
------------------
Attempting to login via OAuth...
Opening a link in your default browser: https://dash.cloudflare.com/oauth2/auth?*****
Successfully logged in.

Next.jSのプロジェクト作成
とりあえずNextJSプロジェクトをデプロイしてみるだけでしたら、今はcloudflareのCLI
からnextのテンプレートを作成できます。
コマンド1つでデプロイまで可能です。
一応yarnでも出来るようになってるように見えますが、実際はnpmでしかできなかったです。
(多分、入力されるコマンドが間違ってる)
yarn create cloudflare cloudflare-on-nextjs --create --webFramework --framework next --ts
npm create cloudflare@latest cloudflare-on-nextjs -- --type webFramework --framework next
$ npm create cloudflare@latest cloudflare-on-nextjs -- --type webFramework --framework next
Need to install the following packages:
create-cloudflare@2.0.11
Ok to proceed? (y)
using create-cloudflare version 2.0.11
╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./cloudflare-on-nextjs
│
├ What type of application do you want to create?
│ type Website or web app
│
├ Which development framework do you want to use?
│ framework next
│
╰ Continue with Next via `npx create-next-app@13.4.2 cloudflare-on-nextjs`
Need to install the following packages:
create-next-app@13.4.2
Ok to proceed? (y)
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use Tailwind CSS with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ Use App Router (recommended)? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /home/vscode/develop/cloudflare-on-nextjs.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next
added 344 packages, and audited 345 packages in 43s
127 packages are looking for funding
run `npm fund` for details
5 moderate severity vulnerabilities
To address all issues, run:
npm audit fix
Run `npm audit` for details.
Success! Created cloudflare-on-nextjs at /home/vscode/develop/cloudflare-on-nextjs
A new version of `create-next-app` is available!
You can update by running: npm i -g create-next-app
╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Created an example API route handler
│
├ Adding the Cloudflare Pages adapter
│ installed @cloudflare/next-on-pages@1, vercel
│
├ Adding command scripts for development and deployment
│ added commands to `package.json`
│
╰ Application configured
╭ Deploy with Cloudflare Step 3 of 3
│
╰ Do you want to deploy your application? (y/n)
Yes / No
╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ yes deploying via `npm run pages:deploy`
│
├ Logging into Cloudflare checking authentication status
│ logged in
│
├ Selecting Cloudflare account retrieving accounts
│ account H.mori0206@gmail.com's Account
│
├ Creating Pages project
│ created via `npx wrangler pages project create cloudflare-on-nextjs --production-branch main --compatibility-flags nodejs_compat`
│
├ Deploying your application
│ deployed via `npm run pages:deploy`
│
├ SUCCESS View your deployed application at https://cloudflare-on-nextjs.pages.dev
│
│ Run the development server npm run pages:dev
│ Deploy your application npm run pages:deploy
│ Read the documentation https://developers.cloudflare.com/pages
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
├ Waiting for DNS to propagate
│ DNS propagation complete.
│
├ Waiting for deployment to become available
│ deployment is ready at: https://cloudflare-on-nextjs.pages.dev
│
├ Opening browser
│
╰ See you again soon!
このスクラップは2023/11/05にクローズされました