Closed3

Cloudflare on NextJS +

hisayuki morihisayuki mori

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?*****

Alt text

Alt text

Successfully logged in.
hisayuki morihisayuki mori

Next.jSのプロジェクト作成

とりあえずNextJSプロジェクトをデプロイしてみるだけでしたら、今はcloudflareのCLIからnextのテンプレートを作成できます。
https://www.npmjs.com/package/create-cloudflare

コマンド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にクローズされました