Setup locally

1. Clone the repo
2. Run npm install in the root directory
3. Login or create a Neon account via the dashboard
4. Create a new project
5. Click Connect and set the dropdown to Prisma with Connection pooling enabled
6. Copy the DATABASE_URL and DIRECT_URL from the connection string
7. Create a .env file in the apps/my-next-app package and paste the connection strings:

   DATABASE_URL="postgresql://postgres:password@[url]-pooler.eu-west-2.aws.neon.tech/neondb?sslmode=require&channel_binding=require"
   DIRECT_URL="postgresql://postgres:password@[url].eu-west-2.aws.neon.tech/neondb?sslmode=require&channel_binding=require"

8. Run npm run db:seed in the prisma package to seed the database
9. Run npm run dev in the apps/my-next-app package to start the Next.js app
10. Open your browser and navigate to http://localhost:3000 to validate the /api/test endpoint works
11. Stop the server and then run npm run preview to start the preview server
12. Open your browser and navigate to http://127.0.0.1:8787/api/test to validate the preview fails with the error: Error: [unenv] fs.readdir is not implemented yet!

Steps taken to create this repo

1. Initialise a new Turborepo: npx create-turbo@latest

2. Delete all items in apps and packages folders

Next.js

1. Application scaffolded in apps folder from OpenNext docs: npm create cloudflare@latest -- my-next-app --framework=next --platform=workers

2. Run npm run dev in apps/my-next-app to validate that the Next.js app works

3. Run npm run preview to validate preview works

Prisma

1. Create a prisma package in packages folder

2. Run npm install prisma tsx --save-dev in the prisma package. Reference

3. Run npm install @prisma/client

4. Run npx prisma init

5. Match my own file structure; move schema.prisma to packages/prisma/schema/schema.prisma

6. Add config to package.json for Prisma multi-file schema support:

    "prisma": {
        "schema": "./schema",
        "seed": "tsx ./seed/seed.ts"
   },

7. Split schema from Prisma example to two separate files:

   • packages/prisma/schema/user.schema.ts
   • packages/prisma/schema/post.schema.ts

8. Update prisma/schema/schema.prisma to use Neon configuration:

   generator client {
    provider        = "prisma-client-js"
    previewFeatures = ["driverAdapters"]
   }
   
    datasource db {
     provider = "postgresql"
     url = env("DATABASE_URL")
     directUrl = env("DIRECT_URL")
    }

9. Add DATABASE_URL and DIRECT_URL to .env file in the prisma package:

   DATABASE_URL="postgresql://postgres:password@[url]-pooler.eu-west-2.aws.neon.tech/neondb?sslmode=require&channel_binding=require"
   DIRECT_URL="postgresql://postgres:password@[url].eu-west-2.aws.neon.tech/neondb?sslmode=require&channel_binding=require"

10. Run npx prisma migrate dev --name init

11. Run npm run db:seed

12. Run npx prisma studio to validate that the Prisma client works and the database is seeded correctly

13. Install @prisma/adapter-neon

14. Create client.ts

15. Create index.ts

Connecting Next.js to Prisma

This section follows the OpenNext docs

1. Add serverExternalPackages: ["@prisma/client", ".prisma/client", "@prisma/adapter-neon"], to next.config.ts
2. Create lib/db.ts
3. Create app/api/test/route.ts to test the Prisma client connection
4. Run npm run dev in the apps/my-next-app folder to validate that the Prisma client works in the Next.js app - validates successfully

Testing in Cloudflare Workers

1. Run npm run preview in the apps/my-next-app folder.
2. Open preview URL at http://127.0.0.1:8787/ - confirm working.
3. Visit http://127.0.0.1:8787/api/test - receive error: Error: [unenv] fs.readdir is not implemented yet!