Open5

Cloudflare PagesでNextJSをEdgeServerで動かす

hisayuki morihisayuki mori

C3でNextProjectの作成

https://developers.cloudflare.com/pages/get-started/c3/

npm create cloudflare@latest nextjs-on-edge-server --framework=next --ts
Need to install the following packages:
  create-cloudflare@2.6.2
Ok to proceed? (y) y

using create-cloudflare version 2.6.2

╭ Create an application with Cloudflare Step 1 of 3
│ 
├ In which directory do you want to create your application?
│ dir ./nextjs-on-edge-server
│
├ 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.19 nextjs-on-edge-server`

Need to install the following packages:
  create-next-app@13.4.19
Ok to proceed? (y) y
✔ Would you like to use TypeScript? … No / Yes 👈 Yes
✔ Would you like to use ESLint? … No / Yes 👈 Yes
✔ Would you like to use Tailwind CSS? … No / Yes 👈 Yes
✔ Would you like to use `src/` directory? … No / Yes 👈 Yes
✔ Would you like to use App Router? (recommended) … No / Yes 👈 Yes
✔ Would you like to customize the default import alias? … No / Yes 👈 Yes
✔ What import alias would you like configured? … ~/*
Creating a new Next.js app in /home/vscode/develop/nextjs-on-edge-server.

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 331 packages, and audited 332 packages in 57s

116 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created nextjs-on-edge-server at /home/vscode/develop/nextjs-on-edge-server

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
│ 
├ Do you want to use the next-on-pages eslint-plugin?
│ yes eslint-plugin
│
├ Adding the Cloudflare Pages adapter 
│ installed @cloudflare/next-on-pages@1, vercel, eslint-plugin-next-on-pages
│ 
├ Retrieving current workerd compatibility date 
│ compatibility date 2023-10-30
│ 
├ Adding command scripts for development and deployment
│ added commands to `package.json`
│ 
├ Committing new files 
│ git commit
│ 
╰ Application configured 

╭ Deploy with Cloudflare Step 3 of 3
│ 
├ Do you want to deploy your application?
│ yes deploy via `npm run pages:deploy`

hisayuki morihisayuki mori

Prismaの追加

vscode@localhost:~/develop$ npx prisma init

✔ Your Prisma schema was created at prisma/schema.prisma
  You can now open it in your favorite editor.

warn You already have a .gitignore file. Don't forget to add `.env` in it to not commit any private information.

Next steps:
1. Set the DATABASE_URL in the .env file to point to your existing database. If your database has no tables yet, read https://pris.ly/d/getting-started
2. Set the provider of the datasource block in schema.prisma to match your database: postgresql, mysql, sqlite, sqlserver, mongodb or cockroachdb.
3. Run prisma db pull to turn your database schema into a Prisma schema.
4. Run prisma generate to generate the Prisma Client. You can then start querying your database.

More information in our documentation:
https://pris.ly/d/getting-started