init

Author: mmikhan

.gitignore

@@ -38,3 +38,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

README.md

@@ -1,36 +1,30 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Next.js Local Docker Postgres setup
 
-## Getting Started
+This is a quick Next.js site to test the Local Docker with Vercel Postgres support. The [doc Vercel offers](https://vercel.com/docs/storage/vercel-postgres/local-development#local-development-with-vercel-postgres) is no longer up to date and the connection never works. This is due to the `@drizzle-orm` and `@vercel/postgres` uses different version of `@neondatabase/serverless` causes this. The only possible fix for now is to override the `@neondatabase/serverless` through `package.json`.
 
-First, run the development server:
+For `npm` user:
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
+```json
+"overrides": {
+  "@neondatabase/serverless": "0.10.4"
+}
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+For `pnpm` user:
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```json
+"pnpm": {
+  "overrides": {
+    "@neondatabase/serverless": "^0.10.4"
+  }
+}
+```
 
-## Deploy on Vercel
+`package-lock.json` or `pnpm-lock.yaml` needs to be remove and rebuild as well as the `node_modules`.
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Resource
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+- [Vercel GitHub issue](https://github.com/vercel/storage/issues/123#issuecomment-2500543485)
+- [Initial explanation](https://github.com/vercel/storage/issues/123#issuecomment-2500543485)
+- [Detailed blogpost](https://gal.hagever.com/posts/running-vercel-postgres-locally)
+- [Vercel blogpost](https://vercel.com/docs/storage/vercel-postgres/local-development#local-development-with-vercel-postgres)

app/api/test/route.ts

@@ -0,0 +1,11 @@
+import { sql } from "@/lib/db";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  // await sql.query(`CREATE TABLE users (name VARCHAR(255));`);
+  // await sql.query(`INSERT INTO users (name) VALUES ('John Doe');`);
+  const { rows, fields } = await sql.query(`SELECT * FROM users;`);
+
+  return Response.json({ success: true, rows, fields });
+}

docker-compose.yml

@@ -0,0 +1,22 @@
+services:
+  postgres:
+    image: postgres
+    environment:
+      POSTGRES_PASSWORD: password
+    # Expose the Postgres port to the host machine,
+    # so you can inspect and administrate it
+    ports:
+      - "54320:5432"
+  pg_proxy:
+    image: ghcr.io/neondatabase/wsproxy:latest
+    platform: linux/arm64/v8
+    environment:
+      APPEND_PORT: "postgres:5432"
+      ALLOW_ADDR_REGEX: ".*"
+      LOG_TRAFFIC: "true"
+    ports:
+      # Expose the WebSocket proxy port to the host machine,
+      # this is where @vercel/postgres will connect
+      - "54330:80"
+    depends_on:
+      - postgres

lib/db.ts

@@ -0,0 +1,10 @@
+import { neonConfig } from "@neondatabase/serverless";
+
+if (process.env.VERCEL_ENV === "development") {
+  neonConfig.wsProxy = (host) => `${host}:54330/v1`;
+  neonConfig.useSecureWebSocket = false;
+  neonConfig.pipelineTLS = false;
+  neonConfig.pipelineConnect = false;
+}
+
+export * from "@vercel/postgres";

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "next-db-test",
+  "name": "nextjs-local-docker-postgres-setup",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@neondatabase/serverless": "^0.10.4",
+    "@vercel/postgres": "^0.10.0",
     "next": "15.0.3",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106"
@@ -22,5 +24,10 @@
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.15",
     "typescript": "^5.7.2"
+  },
+  "pnpm": {
+    "overrides": {
+      "@neondatabase/serverless": "^0.10.4"
+    }
   }
 }