AI News Hub Logo

AI News Hub

The Web Dev Stack That's Winning in 2026: Next.js + Drizzle + Postgres + Clerk

DEV Community
Harsh Patel

Introduction Here's why this stack works so well — and how to set it up from scratch. Why this stack? import { pgTable, serial, text, timestamp } from "drizzle-orm/pg-core"; export const users = pgTable("users", { id: serial("id").primaryKey(), clerkId: text("clerk_id").notNull().unique(), email: text("email").notNull(), name: text("name"), createdAt: timestamp("created_at").defaultNow(), }); Create src/db/index.ts: import { neon } from "@neondatabase/serverless"; import { drizzle } from "drizzle-orm/neon-http"; import * as schema from "./schema"; const sql = neon(process.env.DATABASE_URL!); export const db = drizzle(sql, { schema }); Step 3: Add Drizzle config and push schema Create drizzle.config.ts: import { defineConfig } from "drizzle-kit"; export default defineConfig({ schema: "./src/db/schema.ts", out: "./drizzle", dialect: "postgresql", dbCredentials: { url: process.env.DATABASE_URL!, }, }); npx drizzle-kit push Step 4: Set up Clerk authentication npm install @clerk/nextjs Wrap your app in app/layout.tsx: import { ClerkProvider } from "@clerk/nextjs"; export default function RootLayout({ children }) { return ( {children} ); } Add Clerk keys to .env.local: NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_... import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server"; const isProtected = createRouteMatcher(["/dashboard(.*)"]); export default clerkMiddleware((auth, req) => { if (isProtected(req)) auth().protect(); }); export const config = { matcher: ["/((?!.*\\..*|_next).*)", "/"] }; Step 5: Query the database in a Server Component import { db } from "@/db"; import { users } from "@/db/schema"; import { auth } from "@clerk/nextjs/server"; export default async function Dashboard() { const { userId } = auth(); const user = await db.query.users.findFirst({ where: (users, { eq }) => eq(users.clerkId, userId!), }); return Welcome, {user?.name} ; } Conclusion Next.js + Drizzle + Neon + Clerk is the stack I recommend to every developer starting a new project in 2026. It's fast to set up, type-safe end-to-end, scales to production without config changes, and has a generous free tier across every service. Stop spending a week on boilerplate — get this stack running in an afternoon and focus on building.