Open5
Cloudflare PagesでNextJSをEdgeServerで動かす

開発用コンテナ
- Node 19
- wrangler

C3でNextProjectの作成
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`

npmからyarnへ
package-lock.json
を消してyarn install

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