DEV Community: Mihir Bhadak

Prisma Deep‑Dive Handbook (2025) — From Zero to Expert

Mihir Bhadak — Tue, 09 Sep 2025 19:10:40 +0000

A practical, end‑to‑end guide for expert developers who are new to Prisma. Covers modeling, migrations, querying, performance, deployment, testing, and gotchas — with copy‑pasteable snippets.

0) What Prisma is (and isn’t)

Prisma is a modern TypeScript ORM + tooling that gives you:

Prisma Client – a type‑safe query builder generated from your schema
Prisma Migrate – schema‑driven migrations and drift detection
Prisma Studio – a visual data browser
Optional extras – e.g. Accelerate (global connection pooling / edge), adapters for serverless/edge runtimes

It is not a query language of its own (it compiles to SQL or Mongo queries under the hood) and it’s not a data layer framework like GraphQL.

Supported databases include PostgreSQL, MySQL / MariaDB, SQLite, SQL Server, CockroachDB, and MongoDB (special connector with a few differences).

1) Quickstart (greenfield)

# 1) Install
npm i -D prisma
npm i @prisma/client

# 2) Bootstrap project files
npx prisma init
# creates: prisma/schema.prisma and .env

# 3) Model your data in prisma/schema.prisma (see §2–§4)

# 4) Create your first migration & generate client
npx prisma migrate dev --name init
# (re)generates Prisma Client too

# 5) Open a data GUI
npx prisma studio

Create and use a client instance:

// src/db.ts
import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient };

export const prisma =
  globalForPrisma.prisma ??
  new PrismaClient({ log: ["warn", "error"] });

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

2) Anatomy of `schema.prisma`

// prisma/schema.prisma

datasource db {
  provider = "postgresql"      // mysql | sqlite | sqlserver | mongodb | cockroachdb
  url      = env("DATABASE_URL")
  // For advanced setups you can add:
  // directUrl          = env("DIRECT_URL")
  // shadowDatabaseUrl  = env("SHADOW_DATABASE_URL")
}

generator client {
  provider        = "prisma-client-js"
  // previewFeatures = ["..."]      // opt-in features (only when needed)
}

model User {
  id        Int       @id @default(autoincrement())
  createdAt DateTime  @default(now())
  email     String    @unique
  name      String?
  role      Role      @default(USER)
  posts     Post[]
  // Map to existing DB column names if needed:
  // @map("user_name")  and @@map("tbl_user") on the model
}

model Post {
  id        Int      @id @default(autoincrement())
  slug      String   @unique
  title     String
  content   String?
  published Boolean  @default(false)
  authorId  Int
  author    User     @relation(fields: [authorId], references: [id], onDelete: Cascade)
  tags      Tag[]    // implicit many-to-many via join table `_PostToTag`

  @@index([authorId])
  @@fulltext([title, content])   // Postgres/MySQL where supported
}

enum Role {
  USER
  ADMIN
}

model Tag {
  id   Int     @id @default(autoincrement())
  name String  @unique
  posts Post[]
}

Sections

datasource: DB type + connection URL(s)
generator: which client(s) to generate (JS is default); can add extras via client extensions
Data model: your tables/collections; relations, indexes, defaults, enums, etc.

Common scalar types: String, Int, BigInt, Float, Decimal, Boolean, DateTime, Bytes, Json (+ MongoDB’s ObjectId via @db.ObjectId).

Attributes you’ll use a lot

IDs: @id, composite @@id([a,b]), @default(autoincrement()) | cuid() | uuid()
Uniqueness & indexes: @unique, @@unique([a,b]), @@index([...]), @@fulltext([...])
Relations: @relation(fields: [fk], references: [pk], onDelete: Cascade|Restrict|SetNull|NoAction, onUpdate: ...)
Mapping: @map("col"), @@map("table") to bind to legacy names

3) Relations by example

1‑to‑Many

model User { id Int @id @default(autoincrement()) posts Post[] }
model Post { id Int @id @default(autoincrement()) authorId Int author User @relation(fields: [authorId], references: [id]) }

1‑to‑1 (required on both sides)

model User  { id Int @id @default(autoincrement()) profile Profile? }
model Profile { id Int @id @default(autoincrement()) userId Int @unique user User @relation(fields: [userId], references: [id]) }

Many‑to‑Many (implicit)

model Post { id Int @id @default(autoincrement()) tags Tag[] }
model Tag  { id Int @id @default(autoincrement()) posts Post[] }

Prisma creates a hidden join table _PostToTag. Use an explicit join model if you need extra columns (e.g., assignedAt, weight).

Referential actions

@relation(onDelete: Cascade)  // delete children when parent is deleted
@relation(onDelete: SetNull)  // set FK to NULL

4) Migrations: the definitive workflow

Local/dev

# Create a migration from schema changes, apply it, and regen client
npx prisma migrate dev --name add_posts

# Reset database and reapply all migrations (DANGER: data loss)
npx prisma migrate reset

Deploy/CI

# In pipelines, only apply checked-in migrations
npx prisma migrate deploy

When to use db push (no migration files)

npx prisma db push   # quick prototyping or sync to a dev DB without versioned SQL

Prefer migrate for team/CI. Use db push for prototypes or MongoDB.

Folders/files

prisma/migrations/2025xxxx_add_posts/ with SQL + migration.sql
_prisma_migrations table records history
Shadow DB (optional) is used to safely diff schemas

Fixing mistakes

If a migration failed in prod, create a follow‑up migration (never edit an already‑deployed migration)
For complex drift, generate SQL with prisma migrate diff and apply manually

5) Introspection (brownfield)

Already have a DB? Generate a schema from it:

npx prisma db pull

Then you can start querying immediately. Going forward, choose either migrations or keep pulling and treat the DB as the source of truth (avoid mixing both in the same branch).

6) Seeding

// package.json
{
  "prisma": { "seed": "ts-node prisma/seed.ts" }
}

// prisma/seed.ts
import { prisma } from "../src/db";

async function run() {
  await prisma.user.create({
    data: {
      email: "admin@example.com",
      role: "ADMIN",
      posts: { create: { title: "Hello Prisma", slug: "hello-prisma" } },
    },
  });
}
run().finally(() => prisma.$disconnect());

npx prisma db seed

7) Querying with Prisma Client (the 95% you use daily)

CRUD basics

// Create
await prisma.post.create({ data: { title: "T1", slug: "t1", authorId: 1 } });

// Read
const post = await prisma.post.findUnique({ where: { id: 1 } });

// Update
await prisma.post.update({ where: { id: 1 }, data: { published: true } });

// Delete
await prisma.post.delete({ where: { id: 1 } });

Filtering, selecting, including

const posts = await prisma.post.findMany({
  where: {
    published: true,
    title: { contains: "prisma", mode: "insensitive" },
    author: { email: { endsWith: "@example.com" } },
  },
  select: { id: true, title: true, author: { select: { id: true, email: true } } },
  orderBy: { createdAt: "desc" },
  take: 20,
  skip: 0,
});

Nested writes

// Create a post and connect to (or create) a tag in one go
await prisma.post.create({
  data: {
    title: "Nested",
    slug: "nested",
    author: { connect: { id: 1 } },
    tags: {
      connectOrCreate: [{ where: { name: "ts" }, create: { name: "ts" } }],
    },
  },
});

Upsert & bulk ops

await prisma.user.upsert({
  where: { email: "a@b.com" },
  create: { email: "a@b.com" },
  update: { name: "Alice" },
});

await prisma.post.createMany({
  data: [{ title: "a", slug: "a", authorId: 1 }, { title: "b", slug: "b", authorId: 1 }],
  skipDuplicates: true,
});

Aggregation & grouping

const count = await prisma.post.count({ where: { published: true } });
const stats = await prisma.post.aggregate({ _avg: { id: true }, _max: { createdAt: true } });
const byAuthor = await prisma.post.groupBy({ by: ["authorId"], _count: true, where: { published: true } });

Cursor pagination

const page = await prisma.post.findMany({
  cursor: { id: lastSeenId },
  skip: 1,
  take: 20,
  orderBy: { id: "asc" },
});

Transactions

// Batched (runs in a single transaction)
await prisma.$transaction([
  prisma.user.create({ data: { email: "x@y.com" } }),
  prisma.post.create({ data: { title: "T", slug: "t", authorId: 1 } }),
]);

// Interactive transaction
await prisma.$transaction(async (tx) => {
  const u = await tx.user.create({ data: { email: "z@z.com" } });
  await tx.profile.create({ data: { userId: u.id } });
});

Raw SQL (only when you must)

import { Prisma } from "@prisma/client";

const rows = await prisma.$queryRaw<{ id: number }[]>`
  SELECT id FROM "Post" WHERE title ILIKE ${"%prisma%"}
`;

Always pass values as template parameters (not string‑interpolated) to avoid SQL injection.

8) Middleware & Client Extensions

Middleware (`$use`)

prisma.$use(async (params, next) => {
  const started = Date.now();
  const result = await next(params);
  const took = Date.now() - started;
  if (took > 200) console.warn(`[slow] ${params.model}.${params.action} in ${took}ms`);
  return result;
});

Client extensions (`$extends`)

Add reusable helpers or computed fields.

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient().$extends({
  model: {
    post: {
      async publish(id: number) {
        return prisma.post.update({ where: { id }, data: { published: true } });
      },
    },
  },
  result: {
    post: {
      preview: {
        needs: { content: true },
        compute(p) { return (p.content ?? "").slice(0, 120); },
      },
    },
  },
});

await prisma.post.publish(1);

9) Deployment patterns & connection management

Long‑running servers (Express/Nest/Fastify)

Create one PrismaClient per process and reuse it
Enable logs in dev, disable chatty logs in prod

Serverless (Vercel/Netlify/Lambda)

Use a global singleton pattern to avoid opening a new pool per cold start
Prefer a connection pooler (e.g. PgBouncer) or a serverless‑friendly provider (Neon, PlanetScale, Supabase pooler)
Consider Prisma Accelerate or the Edge client when running at the edge

Edge runtimes

Use @prisma/client/edge plus an adapter/Accelerate; keep queries lean and avoid long transactions

Helpful env vars

DATABASE_URL – main connection string
DIRECT_URL – bypass pooler for migrations if needed
SHADOW_DATABASE_URL – migration shadow DB

10) Performance checklist

Modeling: add @@index, composite indexes for hot filters; avoid SELECT * (use select)
N+1: load relations via include or do two queries with IDs and where: { id: { in: ids } }
Bulk ops: prefer createMany, updateMany, deleteMany where applicable
Pagination: use cursor pagination for infinite scroll
Pooling: configure poolers; avoid creating clients in hot code paths
Tracing/metrics: enable OpenTelemetry or built‑in logging in non‑prod to find slow spots

11) Testing strategies

Run migrations against a throwaway DB per test run (Docker or file‑based SQLite)
Reset via prisma migrate reset (or wrap tests in a top‑level transaction and roll back)
Provide factories using Prisma Client (and keep them fast)

12) Multi‑tenancy options

Row‑level (tenantId column + RLS in Postgres) — simplest operationally
Schema‑per‑tenant (Postgres) — isolation at schema level; more complex migrations
Database‑per‑tenant — strongest isolation but operational overhead

13) Security notes

Never interpolate raw SQL — always parameterize with $queryRaw template args
Enforce authorization in code (Prisma does not do auth) and/or DB policies (e.g., Postgres RLS)
Validate inputs (Zod/Valibot) before querying
Keep migrations in VCS; track who can run migrate deploy

14) CLI command reference (most used)

# Project
npx prisma init                 # bootstrap schema + .env
npx prisma generate             # regenerate Prisma Client
npx prisma format               # format schema.prisma
npx prisma validate             # schema validation

# Database workflows
npx prisma db pull              # introspect existing DB into schema
npx prisma db push              # apply schema to DB (no migration files)

# Migrations (preferred for teams/CI)
npx prisma migrate dev --name <msg>   # create & apply a new migration (dev)
npx prisma migrate reset              # drop DB & reapply migrations (danger)
npx prisma migrate deploy             # apply checked-in migrations (CI/prod)
npx prisma migrate diff \             # generate SQL diff between two states
  --from-url "$A" --to-url "$B" --script
npx prisma migrate resolve            # mark a migration as applied/rolled back

# Tooling
npx prisma studio               # open GUI to view/edit data

# Options (work with any command)
--schema ./path/to/schema.prisma
--skip-generate
--skip-seed
--preview-feature               # (only if a doc asks for it)

15) Next.js patterns (App Router)

Single client instance

// src/lib/prisma.ts
import { PrismaClient } from "@prisma/client";
const globalForPrisma = globalThis as unknown as { prisma?: PrismaClient };
export const prisma = globalForPrisma.prisma ?? new PrismaClient();
if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

Route handler example

// app/api/posts/route.ts
import { prisma } from "@/src/lib/prisma";
export async function GET() {
  const posts = await prisma.post.findMany({ take: 50, orderBy: { id: "desc" } });
  return Response.json(posts);
}

Edge (optional)

import { PrismaClient } from "@prisma/client/edge";
import { withAccelerate } from "@prisma/extension-accelerate";
export const runtime = "edge";
export async function GET() {
  const prisma = new PrismaClient({ datasourceUrl: process.env.DATABASE_URL })
    .$extends(withAccelerate());
  const users = await prisma.user.findMany({ take: 10 });
  return Response.json(users);
}

16) Patterns & recipes

Soft delete

model Post {
  id Int @id @default(autoincrement())
  deletedAt DateTime?
}

prisma.$use(async (params, next) => {
  if (params.model === "Post" && ["delete", "deleteMany"].includes(params.action)) {
    params.action = params.action === "delete" ? "update" : "updateMany";
    // @ts-ignore add data for soft delete
    params.args.data = { ...(params.args.data ?? {}), deletedAt: new Date() };
  }
  return next(params);
});

Cursor‑based pagination helper (client extension)

const prisma = new PrismaClient().$extends({
  model: {
    post: {
      async page({ after, size = 20 }: { after?: number; size?: number }) {
        return prisma.post.findMany({
          take: size,
          ...(after ? { cursor: { id: after }, skip: 1 } : {}),
          orderBy: { id: "asc" },
        });
      },
    },
  },
});

Zod integration for inputs

import { z } from "zod";
const CreatePost = z.object({ title: z.string().min(3), slug: z.string() });
export type CreatePost = z.infer<typeof CreatePost>;

17) Troubleshooting & common errors

P2002 (Unique constraint failed): handle with application error mapping; guard with upsert or pre‑checks
P2021/P2022 (Table/column not found): run missing migrations or db push
Too many connections: reuse a singleton client; use poolers (PgBouncer) or Accelerate/edge client; avoid creating client per request
Shadow database errors: set SHADOW_DATABASE_URL; ensure user can create/drop schemas
Mongo connector differences: no joins; relations are manual via ids; many Prisma features still work with adjusted semantics

18) Mental models & best practices

Treat schema.prisma as the source of truth for relational DBs in app‑owned schemas
Prefer migrate over db push for teams and CI/CD
Always check in migration folders; never edit a deployed migration
Keep client usage close to your data layer; avoid passing Prisma Client deep into UI code
Scope select/include narrowly to reduce payloads and tighten types
For high‑scale read paths, consider an app‑level cache and/or read replica

Appendices

Type helpers you’ll actually use

import type { Prisma } from "@prisma/client";

// Derive the argument type of a query
type FindManyPostArgs = Prisma.PostFindManyArgs;

// Result type of a query
type PostPayload = Prisma.PostGetPayload<{ select: { id: true; title: true } }>;

Environment examples

# .env
DATABASE_URL="postgresql://user:pass@host:5432/db?schema=public&connection_limit=5&pool_timeout=30"
DIRECT_URL="postgresql://user:pass@writer-host:5432/db?schema=public"  # for migrations
SHADOW_DATABASE_URL="postgresql://user:pass@host:5432/shadow"

MySQL ↔ Postgres gotchas

@default(autoincrement()) works on both; UUIDs are often better for sharding
Full‑text search: native on MySQL & Postgres (use @@fulltext) but syntax differs under the hood
Json type exists on both; prefer structured columns when you can

Mongo specifics

Use @db.ObjectId on id fields; relations are manual (no joins)
Many relational helpers (include, select, filters) still work but semantics differ

19) Quick cheat sheet

Modeling: @id, @default(), @unique, @relation(...), @@index([...])
Migrate: migrate dev, migrate deploy, migrate reset, avoid editing old migrations
Query: findMany, findUnique, create, update, delete, upsert, createMany
Filters: { contains, startsWith, in, notIn, lt, lte, gt, gte, equals, mode: "insensitive" }
Relations: { include: { rel: true } } or { select: { rel: { select: { ... } } } }
Pagination: { take, skip, cursor, orderBy }
Transactions: prisma.$transaction([...]) or prisma.$transaction(async tx => { ... })
Diagnostics: Prisma Studio, logs, OpenTelemetry tracing

🚀 Wrapping Up

Prisma ORM is a game-changer for modern web development, enabling developers to work seamlessly with databases while enjoying type safety and an excellent developer experience.

Whether you’re building with Next.js, scaling applications with Node.js, writing strongly-typed code in TypeScript, or integrating Prisma with React on the frontend, you’ll find Prisma fits naturally into your workflow.

Prisma also supports multiple databases like PostgreSQL, MySQL, MongoDB, and SQLite, making it the perfect companion for projects of all sizes.

By combining Prisma with tools like Supabase for serverless hosting, or using it in production with Postgres, you unlock massive flexibility and reliability for modern full-stack apps.

📚 Recommended Resources

Official Prisma Docs → https://www.prisma.io/docs
Prisma GitHub Repository → https://github.com/prisma/prisma
Next.js Official Docs → https://nextjs.org/docs
TypeScript Handbook → https://www.typescriptlang.org/docs
Node.js Docs → https://nodejs.org/en/docs
React Official Docs → https://react.dev
PostgreSQL Docs → https://www.postgresql.org/docs
MongoDB Docs → https://www.mongodb.com/docs

Additional SEO Resources

Learn how to integrate Prisma ORM with Next.js, Node.js, and TypeScript for scalable applications.
Best practices for using Prisma with PostgreSQL, MySQL, and MongoDB.
How Prisma improves developer experience when building React and Next.js full-stack apps.
A step-by-step guide to connect Prisma ORM with modern databases like Postgres and MongoDB.
Using Prisma with Supabase, Vercel, and serverless environments.

SuperMemory MCP: Universal AI Memory with Model Context Protocol (MCP)

Mihir Bhadak — Tue, 02 Sep 2025 18:33:03 +0000

SuperMemory MCP — Universal Memory Across LLMs

Introduction

Artificial Intelligence (AI) agents are rapidly evolving, becoming smarter and more context-aware. But one of the biggest challenges they face is memory. Today, memory across AI platforms is fragmented. Each provider — whether it’s ChatGPT, Grok, Claude, or others — tries to keep user data within its own ecosystem. This creates silos, making it impossible for users to carry their personal history across platforms.

This is where SuperMemory MCP comes in. It provides a universal, centralised memory store that any AI agent can access using the Model Context Protocol (MCP). Think of it as your own personal memory hub that works across all AI platforms, giving you full control of your context, history, and interactions.

In this blog, we’ll dive deep into what SuperMemory MCP is, how it works, and why it matters — both for users and developers. We’ll also explore its role in the growing ecosystem of MCP integrations and its potential to transform the future of AI.

What is the Model Context Protocol (MCP)?

The Model Context Protocol (MCP) is like the Bluetooth of AI agents. It provides a standardised way for AI models to connect with external services, fetch contextual data, and use it in real-time.

Analogy: Just like Bluetooth allows any device (headphones, cars, speakers) to connect seamlessly, MCP allows AI agents to connect with various external resources like Strava, email, Google Sheets, CRM systems, or databases.
Purpose: It enables AI models to go beyond their training data and interact with live, real-world information.
Ease of Use: Adding MCP servers to AI agents is straightforward — platforms like OpenAI Console make it as simple as selecting from a growing list of available servers.

What is SuperMemory MCP?

SuperMemory MCP builds on MCP to solve the AI memory problem. It acts as a universal, user-owned memory hub that integrates into different AI agents via MCP.

Key Features:

Centralised Personal Memory: All your AI interactions and history are stored in one place, independent of any single AI platform.
Cross-Agent Access: Whether you’re using ChatGPT, Grok, or another AI assistant, they can all tap into the same memory source.
User Ownership: Your memory isn’t locked into OpenAI, Anthropic, or any other provider. You own and control it.
Context-Rich Interactions: AI agents can personalise responses better because they have access to consistent memory across platforms.

How Does SuperMemory MCP Work?

Memory Storage: Your history, preferences, and past interactions are stored in the SuperMemory system.
MCP Integration: AI agents connect to SuperMemory via MCP just like they would with Strava, email, or a spreadsheet.
Context Fetching: When you interact with an AI agent, it retrieves relevant context from your SuperMemory before generating a response.
Cross-Platform Sync: Any update in memory (like your new preferences, tasks, or past conversations) is available to all AI agents connected via MCP.

Why SuperMemory MCP Matters

1. For Users

Consistency: No matter which AI assistant you use, it always remembers your history.
Personalisation: AI agents provide highly relevant, context-aware answers.
Control & Privacy: You own your memory, not the AI providers.
Freedom from Silos: No lock-in to a single platform.

2. For Developers

Standardised Integration: Instead of building separate memory systems for each AI, developers can plug into SuperMemory via MCP.
Efficiency: Faster development cycles and easier cross-platform support.
Scalability: As more MCP servers appear, memory can be seamlessly orchestrated with other services.

SuperMemory MCP vs Traditional AI Memory

Feature	Traditional AI Memory (ChatGPT, Grok, etc.)	SuperMemory MCP
Ownership	Controlled by provider	Controlled by user
Cross-Platform	❌ Limited	✅ Yes
Flexibility	Siloed ecosystem	Universal access
Privacy	Provider-dependent	User-owned and managed

The Orchestration Challenge

One open question is: how should an AI agent decide which MCP server to use at a given time?

For example, if you have:

A Strava MCP server (fitness data)
A Google Sheets MCP server (finance data)
SuperMemory MCP (personal memory)

How should the agent decide which to prioritise? Should it:

Query multiple servers?
Fall back on its training data?
Optimise based on context?

NVIDIA has explored similar questions in tool selection, using fine-tuned models to choose the best option. A similar orchestration approach could be applied to MCP server selection.

Real-World Use Cases

Unified Personal Assistant: Whether you ask ChatGPT or Grok about your last trip, both can fetch details from SuperMemory.
Cross-Platform Productivity: Your to-do list updated on Google Sheets is instantly accessible to any AI assistant.
Personalised Learning: AI tutors can recall your progress and preferences, no matter which platform you’re using.
Healthcare Applications: Medical history stored once in SuperMemory can be accessed by different AI health assistants safely and consistently.

SEO Benefits of SuperMemory MCP Content

This blog is designed with SEO in mind to rank highly for queries such as:

SuperMemory MCP
Universal AI memory
Model Context Protocol memory
Cross-platform AI agents
AI memory integration

By covering What, How, Why, and Real-World Use Cases, this blog ensures long-form, keyword-rich, and structured content that aligns with search engine ranking best practices.

Conclusion

The future of AI lies in contextual, personalised, and cross-platform interactions. Memory plays a central role in this vision. SuperMemory MCP is leading the way by offering a universal, user-owned memory hub accessible via MCP.

For users, it ensures consistency, privacy, and personalisation.
For developers, it simplifies integration and scalability.

As MCP continues to expand, solutions like SuperMemory could become the standard for AI memory orchestration, enabling a truly seamless AI ecosystem.

👉 Explore more about SuperMemory MCP at https://mcp.supermemory.ai

Are You Struggling with Clerk Webhooks? Not Anymore! 🚀

Mihir Bhadak — Tue, 25 Feb 2025 15:34:54 +0000

Hey there, fellow developers! 👋 Are you tired of wrestling with Clerk webhooks? Do they trigger sometimes, and ghost you at other times? Have you ever found your database riddled with incomplete or duplicate user data because of webhook failures? If you're nodding your head, then buckle up, because I've got a game-changing solution for you!

The Webhook Woes 😫

Like many of you, I dove headfirst into using Clerk for authentication in my Next.js projects. Clerk is fantastic, but those webhooks? They were the bane of my existence!

Inconsistent Behavior: Sometimes the webhook triggers, sometimes it doesn't. 🤷‍♂️
Data Corruption: My database looked like a Jackson Pollock painting, all thanks to failed webhook requests. 🎨💥
Localhost Limitations: Local development felt like navigating a minefield, with webhooks simply refusing to cooperate. 💣

After pulling my hair out, I decided enough was enough. I needed a reliable way to keep user data in sync without relying on these temperamental webhooks. And guess what? I cracked the code! 🥳

The Eureka Moment: Say Goodbye to Webhooks! 🎉

Instead of waiting for external triggers, I devised a system that updates user data every single time a user refreshes or navigates the site. That's right – no more webhooks!

This approach has been flawless for me, keeping my database clean and my website secure. Ready to ditch the webhook headache? Let's dive in! 🤿

The Solution: Sync User Data on Every Refresh 🔄

Here's the magic formula:

Check if the user exists in the database whenever they visit the site. 🕵️‍♀️
Create a new user in the database if they don't exist. 👶
Update user information if any data has changed. 🛠️

I implemented this solution in Next.js 15 using Clerk's useUser hook and Next.js API routes. Let's break it down step-by-step!

Step-by-Step Implementation 🪜

1. Setting Up Clerk in Next.js

First things first, if you haven't already, install Clerk in your Next.js project:

npm install @clerk/nextjs

Wrap your application with the ClerkProvider and LandingProvider in src/app/layout.tsx:

import { ClerkProvider } from "@clerk/nextjs";
import { LandingProviders } from "@/components/LandingProviders.tsx";
import { dark } from "@clerk/themes";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
        <ClerkProvider appearance={{ baseTheme: dark }}>
          <html lang="en">
            <body>
                <LandingProviders>
                    {children}
                </LandingProviders>
            </body>
          </html>
        </ClerkProvider>
    );
}

2. Creating the User Sync Logic (components/LandingProviders.tsx)

This component is the heart of our solution. It checks and updates user data every time they visit the website. 💖

Code Explanation:

It fetches the user from the database.
If the user doesn’t exist, it creates a new record.
If the user’s data has changed, it updates the database.

"use client";

import { FullScreenLoader } from "@/components/Loader";
import LandingPage from "@/components/pages/LandingPage";
import { useUser } from "@clerk/nextjs";
import { redirect, usePathname } from "next/navigation";
import React, { useEffect, useRef } from "react";

const LandingProviders = ({ children }: { children: React.ReactNode }) => {
  const { isLoaded, isSignedIn, user } = useUser();
  const path = usePathname();
  const isInitialMount = useRef(true);

  useEffect(() => {
    // Skip the first render and only run when user data changes
    if (isInitialMount.current) {
      isInitialMount.current = false;
      return;
    }

    const checkAndUpdateUser = async () => {
      if (!isSignedIn || !user) return;

      try {
        // Get existing user data
        const userResponse = await fetch(`/api/user/${user.id}`);
        const userData = await userResponse.json();

        // Prepare current user data with proper null checks
        const currentUserData = {
          clerkId: user.id,
          username: user.username || "",
          email: user.emailAddresses[0].emailAddress,
          firstName: user.firstName || "",
          lastName: user.lastName || "",
          imageUrl: user.imageUrl || "",
        };

        if (!userData.data) {
          console.log("User not found, creating new user");
          const createResponse = await fetch("/api/user", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(currentUserData),
          });

          if (!createResponse.ok) {
            console.error("Failed to create user");
          }

          return;
        }

        // Check if any user data has changed
        const hasDataChanged = Object.entries(currentUserData).some(
          ([key, value]) => userData.data[key] !== value
        );

        if (hasDataChanged) {
          console.log("User data mismatch, updating user data");
          await fetch(`/api/user/${user.id}`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(currentUserData),
          });
        }
      } catch (error) {
        console.error("Error managing user data:", error);
      }
    };

    checkAndUpdateUser();
  }, [isSignedIn, user]);

  if (!isLoaded) return ;
  if (!isSignedIn && path === "/" return <LandingPage />;
  return children;
};

export default LandingProviders;

3. API Routes to Handle User Data

Create `/api/user/[id]/route.ts` for Fetching & Updating Users:

import { NextResponse } from "next/server";
import connectDB from "@/lib/connectDB";
import User from "@/models/User";

// GET: Get Specific User
export async function GET(req: NextRequest, { params }: {params: Promise<{ id: string }>}) {
  const id = (await params).id;
  await connectDB();
  const user = await User.findOne({ clerkId: id });
  return NextResponse.json({ data: user });
}

// PUT: Update User
export async function PUT(req: NextRequest, { params }: {params: Promise<{ id: string }>}) {
  const id = (await params).id;
  await connectDB();
  const data = await req.json();
  await User.updateOne({ clerkId: id }, { $set: data });
  return NextResponse.json({ message: "User updated" });
}

Create `/api/user/route.ts` for Creating Users:

import { NextResponse } from "next/server";
import connectDB from "@/lib/connectDB";
import User from "@/models/User";

// POST: Create New User
export async function POST(req: NextRequest) {
  await connectDB();
  const data = await req.json();
  const existingUser = await User.findOne({ clerkId: data.clerkId });

  if (existingUser) {
    return NextResponse.json({ message: "User already exists" }, { status: 409 });
  }

  // If there any dublicate enrty in database or user deleted their accound from clerk then it delete that record
  const existingUserName = await User.findOne({ clerkId: data.username });

  if (existingUserName) {
    if(existingUserName.email == data.email){
        User.findOneAndDelete({
            $or: [{ clerkId: data.clerkId }, { username: data.username }]
        })
    }
  }

  const user = new User(data);
  await user.save();
  return NextResponse.json({ message: "User created successfully" });
}

Dynamic Routing for Landing Page and Dashboard with Clerk Authentication 🛣️

Traditionally, different pages are needed for authenticated and unauthenticated users with separate URLs. However, using Clerk authentication and middleware, you can dynamically display either the landing page or the dashboard on the same URL.

Benefits

Seamless user experience
No need for separate dashboard URLs
Secure authentication handling with Clerk

Middleware for Authentication

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isPublicRoute = createRouteMatcher(['/sign-in(.*)', '/sign-up(.*)', '/api(.*)', "/", "/api/webhooks(.*)"]);

export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    await auth.protect();
  }
});

export const config = {
  matcher: [
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    '/(api|trpc)(.*)',
  ],
};

The Grand Finale: A Stable and Clean Database! 🏆

This method ensures 100% reliability in keeping user data synced without relying on unreliable webhooks. Every time a user visits your website, their data is checked and updated automatically.

This approach has significantly improved the stability of my application and kept my database clean.

If you’re facing issues with Clerk webhooks, give this a shot! You won't regret it! 😉

Let me know your thoughts in the comments! 👇

Happy Coding! 💻🎉

Using Prisma ORM with Next.js 15, TypeScript, and PostgreSQL

Mihir Bhadak — Tue, 25 Feb 2025 05:03:38 +0000

Introduction

Prisma ORM is a powerful and type-safe database toolkit for Node.js and TypeScript. It simplifies database access and management, making it a great choice for Next.js applications. This guide will walk you through setting up Prisma with Next.js 15, TypeScript, and a PostgreSQL database.

Prerequisites

Ensure you have the following installed:

Node.js (v16+)
PostgreSQL
npm or yarn

Step 1: Setting Up Next.js 15 Project

First, create a new Next.js 15 project with TypeScript:

npx create-next-app@latest my-prisma-app --typescript
cd my-prisma-app

Step 2: Installing Prisma and PostgreSQL Driver

Install Prisma and the PostgreSQL client library:

npm install @prisma/client
npm install --save-dev prisma
npm install pg

Step 3: Initializing Prisma

Run the following command to initialize Prisma:

npx prisma init

This command:

Creates a prisma directory with a schema.prisma file
Generates an .env file for database configuration

Step 4: Configuring PostgreSQL Connection

In the .env file, update the database URL:

DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/DATABASE_NAME"

Replace USER, PASSWORD, and DATABASE_NAME with your PostgreSQL credentials.

Step 5: Defining the Prisma Schema

Edit prisma/schema.prisma to define a model:

model User {
  id    String @id @default(uuid())
  name  String
  email String @unique
  posts Post[]
}

model Post {
  id        String @id @default(uuid())
  title     String
  content   String?
  author    User   @relation(fields: [authorId], references: [id])
  authorId  String
  createdAt DateTime @default(now())
}

Step 6: Running Migrations

Generate and apply migrations:

npx prisma migrate dev --name init

This will create the database tables.

Step 7: Generating Prisma Client

Run the following command to generate the Prisma Client:

npx prisma generate

This command creates TypeScript types for your database models.

Step 8: Using Prisma in Next.js API Route

Create an API route in pages/api/users.ts:

import { NextApiRequest, NextApiResponse } from 'next';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'GET') {
    const users = await prisma.user.findMany();
    return res.status(200).json(users);
  }
}

Step 9: Seeding the Database (Optional)

Add a prisma/seed.ts file:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

async function main() {
  await prisma.user.create({
    data: {
      name: 'John Doe',
      email: 'johndoe@example.com',
    },
  });
}

main()
  .catch((e) => console.error(e))
  .finally(async () => await prisma.$disconnect());

Run the seed command:

npx prisma db seed

Step 10: Prisma Studio (GUI for DB Management)

Launch Prisma Studio:

npx prisma studio

This opens a web interface to interact with your database.

List of Prisma Commands

Command	Description
`npx prisma init`	Initializes Prisma in the project.
`npx prisma migrate dev --name init`	Creates and applies a new migration.
`npx prisma generate`	Generates the Prisma client for TypeScript.
`npx prisma studio`	Opens Prisma Studio for database management.
`npx prisma db seed`	Runs the seed script to populate the database.
`npx prisma migrate status`	Shows the current migration status.
`npx prisma format`	Formats the Prisma schema file.
`npx prisma validate`	Validates the Prisma schema file.

Conclusion

You have successfully set up Prisma ORM with Next.js 15, TypeScript, and PostgreSQL. This setup allows you to interact with your database using a fully typed API, making development more efficient and secure.

The Ultimate Guide to Full Stack Web Development: Roadmap, Salary, Pros & Cons, and More!

Mihir Bhadak — Fri, 14 Feb 2025 03:13:33 +0000

Full stack web development has gained immense popularity due to its broad skill set and versatility. Full stack developers are capable of handling both frontend and backend development, making them highly valuable in the tech industry. If you’re considering becoming a full stack web developer, or if you're just curious about what the role entails, this guide covers everything you need to know: roadmap, salary expectations, skills in demand, career opportunities, pros and cons, and a comparison to other developer roles.

What is Full Stack Web Development?

A Full Stack Web Developer is someone who works on both the frontend (client-side) and backend (server-side) of web applications. This means they handle the entire development process, from building user interfaces to managing databases and deploying applications.

Key Areas in Full Stack Development:

Frontend Development: Focuses on what users see and interact with in a web application.
Backend Development: Handles the server, database, and application logic.
DevOps & Deployment: Ensures that the application is ready for use in production, scales effectively, and is easy to update.

Full Stack Developer Roadmap

Becoming a full stack developer requires mastering a variety of technologies across both the frontend and backend. Here's a step-by-step guide:

Frontend Development

HTML/CSS: Learn the basics of structuring web pages (HTML) and styling them (CSS).
JavaScript: This language adds interactivity and dynamic behavior to web pages. Focus on DOM manipulation, ES6+ features, and frameworks like React, Vue.js, or Angular.
Version Control: Familiarize yourself with Git to manage your code and collaborate with others.
CSS Frameworks: Learn CSS frameworks like Bootstrap or Material UI for faster styling and responsive design.

Backend Development

Programming Languages: Choose a backend language like JavaScript (Node.js), Python (Django/Flask), Ruby (Ruby on Rails), or Java (Spring).
Databases: Understand SQL databases (MySQL, PostgreSQL) and NoSQL (MongoDB).
APIs: Learn how to build RESTful APIs and experiment with GraphQL for modern API design.
Authentication and Authorization: Understand concepts like JWT, OAuth, and sessions for secure user authentication.

DevOps & Deployment

Cloud Platforms: Learn about cloud services such as AWS, Heroku, or Google Cloud for deploying and hosting applications.
Containers: Get comfortable with Docker and Kubernetes for containerization and scalable deployments.
CI/CD: Master Continuous Integration and Continuous Deployment pipelines to automate testing and deployment.

Advanced Topics

Microservices: Break down monolithic applications into smaller, scalable microservices.
Serverless Architecture: Explore serverless computing for scalable applications without worrying about managing servers.
Web Security: Learn how to protect your application from threats like XSS, SQL injection, and CSRF.

Salary Expectations for Full Stack Developers

Salary expectations can vary depending on experience, location, and the specific tech stack used. However, here's a rough estimate of full stack developer salaries in India:

Junior (0-2 years): ₹5,00,000 - ₹8,00,000 per year.
Mid-Level (2-5 years): ₹8,00,000 - ₹12,00,000 per year.
Senior (5+ years): ₹12,00,000 - ₹20,00,000+ per year.

In cities like Bangalore, Hyderabad, and Mumbai, salaries might be on the higher end due to the demand for skilled developers in these tech hubs.

Pros and Cons of Being a Full Stack Developer

Pros

Versatility: You have the ability to work on both the frontend and backend of applications, making you a well-rounded developer.
High Demand: Full stack developers are in high demand across various industries, leading to numerous job opportunities.
Better Pay: Due to your broad skill set, full stack developers often command higher salaries compared to specialized developers.
Freelance Opportunities: Full stack developers are ideal candidates for freelance work, as they can independently develop both client and server-side applications.
Comprehensive Understanding: Full stack developers have a holistic understanding of how applications are built, tested, and deployed.

Cons

Continuous Learning: Full stack development requires constant learning, as both frontend and backend technologies evolve rapidly.
Wide Skill Set Required: You must be proficient in a wide range of tools, frameworks, and technologies, which can be overwhelming.
Longer Development Times: Since you’re responsible for both frontend and backend, development can take longer, especially when facing complex projects.
Burnout Risk: Managing both frontend and backend development can lead to burnout if you don’t have proper work-life balance.
Less Specialization: While full stack developers are versatile, they may not have the deep expertise that specialized frontend or backend developers possess.

Full Stack Developer vs Other Developer Roles

Here’s how Full Stack Developers compare to other developer roles:

Role	Focus	Skills
Frontend Developer	Client-side (UI/UX)	HTML, CSS, JavaScript, React, Angular, Vue.js
Backend Developer	Server-side (Logic, Database)	Node.js, Python, Java, Ruby, SQL, NoSQL
Mobile App Developer	Mobile applications (iOS/Android)	Swift, Kotlin, React Native, Flutter
DevOps Engineer	Infrastructure, Automation, Deployment	CI/CD, Docker, Kubernetes, AWS, Cloud Platforms
Full Stack Developer	Both frontend and backend development	Frontend (React), Backend (Node.js, Python), Cloud Platforms, APIs

Why Full Stack Development Stands Out

Broad Skill Set: You have the versatility to work on both the client-side and server-side, making you highly adaptable.
Higher Earning Potential: Full stack developers are often compensated well due to their wide-ranging skills.
Career Flexibility: Full stack developers can transition into other roles such as lead developer, software architect, or even venture into DevOps or mobile development.
End-to-End Development: You can handle the entire development process, making you an invaluable asset for startups and small companies.

Conclusion: Should You Become a Full Stack Developer?

Full stack web development is an exciting and rewarding career choice for those who are passionate about building complete web applications. While it requires learning a wide range of technologies, the skills you gain will make you highly versatile and in-demand in the job market.

As a full stack developer, you will have the ability to work across both the frontend and backend of an application, deploy it to production, and ensure it runs smoothly. The career offers higher salaries, freelancing opportunities, and the chance to work on cutting-edge technologies.

Whether you’re just starting out or considering a career switch, mastering full stack development can open up countless opportunities in the tech industry. The journey may be challenging, but the rewards are definitely worth it.

Resources for Aspiring Full Stack Developers:

Online Courses: Platforms like Coursera, Udemy, and edX offer comprehensive full stack development courses.
Bootcamps: Coding bootcamps like Le Wagon, App Academy, and Ironhack provide intensive training in full stack development.
Communities & Networking: Engage with communities on GitHub, attend meetups, and participate in hackathons to build your skills and network.

This blog should provide a comprehensive view of what it takes to become a Full Stack Web Developer and the career prospects in India. Would you like to dive deeper into any specific topic or need more guidance on getting started? Feel free to ask!

Using Clerk Authentication Webhooks with Next.js || Sync Clerk data to your Database

Mihir Bhadak — Thu, 13 Feb 2025 05:35:17 +0000

Clerk is a powerful authentication service that simplifies user management in modern applications. One of its key features is webhooks, which allow you to trigger events in real-time when user actions occur (e.g., sign-ups, sign-ins, or profile updates). In this guide, we’ll explore the benefits and drawbacks of Clerk authentication webhooks, common issues developers face, as well as how to integrate them into a Next.js application.

Pros and Cons of Clerk Authentication Webhooks

✅ Pros:

Real-time Event Handling: Webhooks notify your application immediately when user events occur.
Automated Workflows: You can automate tasks such as sending welcome emails, updating databases, or logging activity.
Scalability: Since webhooks operate asynchronously, they scale well without blocking other processes.
Enhanced Security: Clerk webhooks provide signature verification to ensure secure event handling.
Easy Integration: Seamlessly integrates with Next.js API routes and other backend services.

❌ Cons:

Potential Latency: If the webhook processing takes too long, it may slow down responses.
Debugging Complexity: Webhooks can be tricky to debug since they are asynchronous.
Reliability Concerns: If the receiving server is down, webhooks might fail unless Clerk retries them.
Signature Mismatch Issues: Incorrect handling of signatures can result in webhook failures.

What is Svix?

Svix is a powerful webhook management infrastructure that simplifies webhook delivery, retries, and monitoring. Clerk leverages Svix for managing and delivering webhooks securely and efficiently.

Why Svix?

Automatic Retries: Svix ensures webhook events are retried if the initial delivery fails.
Message Signing: Svix webhooks are cryptographically signed for security.
Webhook Debugging: Provides a dashboard to inspect webhook logs and diagnose failures.
Scalability: Built for high-performance webhook handling across large-scale applications.
Clerk uses Svix under the hood, so understanding how it works helps in debugging and securing webhooks effectively.

Common Issues Developers Face

Invalid Signature Errors: This occurs when the webhook signature verification process fails. Ensure the correct hashing algorithm and secret key are used.
Webhook Not Triggering: If the webhook isn't firing, check Clerk dashboard settings and ensure the correct endpoint is configured.
Timeouts on Webhook Processing: If the API route takes too long to respond, Clerk may mark the webhook as failed.
Local Development Issues: Webhooks don't work locally without a tunneling service like ngrok or localhost.run.
Payload Format Mismatch: Ensure the Next.js API route correctly parses the JSON body sent by Clerk.

Step-by-Step Guide: Using Clerk Authentication Webhooks in Next.js

1️⃣ Set Up Clerk in Your Next.js App

If you haven’t already set up Clerk in your Next.js project, install the required dependencies:

npm install @clerk/nextjs

Then, configure Clerk in your Next.js app by updating your .env.local file with your Clerk API keys:

NEXT_PUBLIC_CLERK_FRONTEND_API=<your_frontend_api>
CLERK_SECRET_KEY=<your_secret_key>

Wrap your app with the Clerk provider in _app.js or layout.tsx:

import { ClerkProvider } from '@clerk/nextjs';

export default function App({ Component, pageProps }) {
  return (
    <ClerkProvider>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

2️⃣ Enable Webhooks in Clerk Dashboard

Go to your Clerk dashboard.
Navigate to Webhooks.

Click Create Webhook.

Choose User events (such as user.created, user.updated, user.deleted).

Enter your Next.js API route URL (e.g., https://yourdomain.com/api/clerk-webhook).
Save the webhook.

3️⃣ Create a Next.js API Route for Webhooks

In your Next.js project, create a webhook handler file:

📂 pages/api/clerk-webhook.ts

import { WebhookEvent } from '@clerk/nextjs/server';
import { buffer } from 'micro';
import crypto from 'crypto';
import { NextApiRequest, NextApiResponse } from 'next';

export const config = {
  api: {
    bodyParser: false, // Clerk sends raw JSON, so disable bodyParser
  },
};

const CLERK_WEBHOOK_SECRET = process.env.CLERK_WEBHOOK_SECRET as string;

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const rawBody = await buffer(req);
  const signature = req.headers['clerk-signature'] as string;
  const expectedSignature = crypto.createHmac('sha256', CLERK_WEBHOOK_SECRET).update(rawBody).digest('hex');

  if (signature !== expectedSignature) {
    return res.status(401).json({ error: 'Invalid signature' });
  }

  const event: WebhookEvent = JSON.parse(rawBody.toString());

  switch (event.type) {
    case 'user.created':
      console.log('New user:', event.data);
      // Add logic (e.g., send welcome email)
      break;
    case 'user.updated':
      console.log('User updated:', event.data);
      // Update database records
      break;
    case 'user.deleted':
      console.log('User deleted:', event.data);
      // Handle account deletion
      break;
    default:
      console.log('Unhandled event:', event.type);
  }

  res.status(200).json({ received: true });
}

4️⃣ Deploy & Test the Webhook

Deploy your app to Vercel, Netlify, or any hosting provider.
Use Clerk's webhook testing tool to send test events.
Check your API route logs to ensure events are received correctly.

Best Practices for Clerk Webhooks in Next.js

✅ Use Environment Variables: Never hardcode API keys. Use .env.local to store secrets.
✅ Enable Logging: Log webhook events during development to debug easily.
✅ Validate Webhook Signatures: Always verify signatures to prevent unauthorized access.
✅ Retry Mechanism: Implement a retry strategy to handle temporary failures.
✅ Use Background Jobs: If webhook processing takes time, queue the tasks using background jobs (e.g., Redis, BullMQ).
✅ Use a Tunneling Service for Local Development: Tools like ngrok help test webhooks locally.

Conclusion

Clerk authentication webhooks in Next.js provide a powerful way to automate user-related processes. By setting up webhooks correctly, you can handle real-time events such as user sign-ups, updates, and deletions securely and efficiently. Following best practices ensures a smooth and reliable integration.

By implementing the above steps, your Next.js app will be well-equipped to handle Clerk webhooks effectively. 🚀

Stay together to make your own solution if webhook not working.

Building Secure Authentication Systems with Next.js and Clerk 🚀🔒

Mihir Bhadak — Fri, 02 Aug 2024 04:52:52 +0000

In the ever-evolving world of web development, securing your applications is paramount. Leveraging Next.js and Clerk, we can build robust and secure authentication systems efficiently. This guide will walk you through the process step-by-step, with code snippets and explanations to help you get started quickly.

Introduction to Next.js and Clerk 🌐
Setting Up Your Next.js Project 🛠️
Integrating Clerk with Next.js 🔗
Setting Up Clerk Authentication 🛡️
Adding Authentication Pages 📄
Create the sign-in and sign-up pages 📄
Best Practices for Secure Authentication 🛡️
Conclusion ✨

1. Introduction to Next.js and Clerk 🌐

Next.js is a powerful React framework that enables developers to build fast, scalable web applications. Clerk is an all-in-one authentication and user management solution that seamlessly integrates with Next.js, providing secure and user-friendly authentication systems.

2. Setting Up Your Next.js Project 🛠️

First, let's create a new Next.js project. Ensure you have Node.js and npm installed on your system.

npx create-next-app@latest secure-auth-system
cd secure-auth-system

3. Integrating Clerk with Next.js 🔗

Install the Clerk SDK and the Next.js integration package:

npm install @clerk/nextjs

4. Setting Up Clerk Authentication 🛡️

Step 1: Create a Clerk Account

Head over to Clerk and create an account. Set up your application to obtain the API keys you'll need.

Step 2: Configure Clerk in Next.js

Create a .env file in your project's root directory and add your Clerk credentials:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= <your API key>
CLERK_SECRET_KEY= <your secret key>
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

Create a middleware.ts file to handle authentication:

// middleware.ts
import { clerkMiddleware } from "@clerk/nextjs/server";

export default clerkMiddleware();

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

5. Adding Authentication Pages 📄

Create app/layout.tsx to set up the layout and Clerk provider:

// app/layout.tsx
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
import './globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <header>
            <SignedOut>
              <SignInButton />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
          <main>
            {children}
          </main>
        </body>
      </html>
    </ClerkProvider>
  );
}

6. Create the sign-in and sign-up pages:

sign-up:

// app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from "@clerk/nextjs";

export default function Page() {
  return <SignUp />;
}

sign-in:

// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from "@clerk/nextjs";

export default function Page() {
  return <SignIn />;
}

7. Best Practices for Secure Authentication 🛡️

Use HTTPS: Always use HTTPS to encrypt data between the client and server.
Environment Variables: Store sensitive credentials in environment variables.
Session Management: Implement secure session management practices.
Multi-Factor Authentication: Enable MFA for an additional layer of security.
Regular Audits: Regularly audit your authentication logic and dependencies for vulnerabilities.
Least Privilege Principle: Assign the minimum necessary privileges to users and components.

8. Conclusion ✨

Building a secure authentication system is crucial for modern web applications. By leveraging Next.js and Clerk, you can create a robust and secure authentication system with minimal effort. Implementing best practices further ensures the security of your application.

Feel free to experiment with different configurations and features offered by Clerk to tailor the authentication system to your specific needs. Happy coding! 👨‍💻👩‍💻

Best Free APIs for React, Next.js, and Full-Stack Developers

Mihir Bhadak — Thu, 01 Aug 2024 03:46:13 +0000

Introduction

Opening Hook: Start with a catchy opening that highlights the importance of APIs in modern web development.
Purpose: Explain the purpose of the blog post and what readers can expect to learn.

Weather APIs
Social Media APIs
Data & Analytics APIs
E-commerce APIs
Utility APIs
Conclusion

1. Weather APIs

OpenWeatherMap

Description: Provides current weather data, forecasts, and historical data.
Key Features: Free tier with access to a wide range of weather data.
Usage Example: Show a simple example of fetching weather data using Fetch API or Axios in a React component.

https://openweathermap.org/api

WeatherAPI

Description: Another robust option for weather data.
Key Features: Offers free access to weather forecasts, historical data, and weather alerts.
Usage Example: Example of integrating WeatherAPI in a Next.js application.

https://www.weatherapi.com/

2. Social Media APIs

Twitter API

Description: Access to Twitter data for tweets, trends, and user information.
Key Features: Free tier allows read-only access.
Usage Example: Fetch and display tweets in a React component.

https://developer.twitter.com/en/docs

Facebook Graph API

Description: Access to Facebook's social graph data.
Key Features: Free tier for basic access to user profiles, pages, and posts.
Usage Example: Integrate Facebook login in a Next.js application.

https://developers.facebook.com/docs/graph-api

3. Data & Analytics APIs

Google Analytics API

Description: Access to Google Analytics data.
Key Features: Free access to website traffic and user behavior data.
Usage Example: Display Google Analytics data in a React dashboard.

https://developers.google.com/analytics

NewsAPI

Description: Provides news articles from various sources.
Key Features: Free tier allows access to top headlines and news articles.
Usage Example: Create a news feed component in a Next.js app.

https://newsapi.org/

4. E-commerce APIs

Stripe API

Description: Payment processing for e-commerce platforms.
Key Features: Free tier for development and testing.
Usage Example: Integrate Stripe checkout in a Next.js application.

https://stripe.com/docs/api

Commerce.js

Description: Headless commerce API for building custom e-commerce experiences.
Key Features: Free tier with essential e-commerce features.
Usage Example: Build a product listing page in a React application.

https://commercejs.com/

5. Utility APIs

RandomUser.me

Description: Generate random user data for testing and development.
Key Features: Free and easy to use.
Usage Example: Populate a user list in a React component with random user data.

https://randomuser.me/

IP Geolocation API

Description: Get geolocation information from IP addresses.
Key Features: Free tier with access to location data.
Usage Example: Display user location information in a Next.js app.

https://ipgeolocation.io/

Conclusion

Recap: Summarize the APIs covered and their use cases.
Call to Action: Encourage readers to explore these APIs and integrate them into their projects.
Feedback Request: Ask for comments and suggestions for other useful APIs.

DEV Community: Mihir Bhadak

Prisma Deep‑Dive Handbook (2025) — From Zero to Expert

0) What Prisma is (and isn’t)

1) Quickstart (greenfield)

2) Anatomy of schema.prisma

3) Relations by example

1‑to‑Many

1‑to‑1 (required on both sides)

Many‑to‑Many (implicit)

Referential actions

4) Migrations: the definitive workflow

5) Introspection (brownfield)

6) Seeding

7) Querying with Prisma Client (the 95% you use daily)

CRUD basics

Filtering, selecting, including

Nested writes

Upsert & bulk ops

Aggregation & grouping

Cursor pagination

Transactions

Raw SQL (only when you must)

8) Middleware & Client Extensions

Middleware ($use)

Client extensions ($extends)

9) Deployment patterns & connection management

Long‑running servers (Express/Nest/Fastify)

Serverless (Vercel/Netlify/Lambda)

Edge runtimes

Helpful env vars

10) Performance checklist

11) Testing strategies

12) Multi‑tenancy options

13) Security notes

14) CLI command reference (most used)

15) Next.js patterns (App Router)

16) Patterns & recipes

17) Troubleshooting & common errors

18) Mental models & best practices

Appendices

19) Quick cheat sheet

🚀 Wrapping Up

📚 Recommended Resources

Additional SEO Resources

SuperMemory MCP: Universal AI Memory with Model Context Protocol (MCP)

SuperMemory MCP — Universal Memory Across LLMs

Introduction

What is the Model Context Protocol (MCP)?

What is SuperMemory MCP?

Key Features:

How Does SuperMemory MCP Work?

Why SuperMemory MCP Matters

1. For Users

2. For Developers

SuperMemory MCP vs Traditional AI Memory

The Orchestration Challenge

Real-World Use Cases

SEO Benefits of SuperMemory MCP Content

Conclusion

Are You Struggling with Clerk Webhooks? Not Anymore! 🚀

The Webhook Woes 😫

The Eureka Moment: Say Goodbye to Webhooks! 🎉

The Solution: Sync User Data on Every Refresh 🔄

Step-by-Step Implementation 🪜

1. Setting Up Clerk in Next.js

2. Creating the User Sync Logic (components/LandingProviders.tsx)

Code Explanation:

3. API Routes to Handle User Data

Create /api/user/[id]/route.ts for Fetching & Updating Users:

Create /api/user/route.ts for Creating Users:

Dynamic Routing for Landing Page and Dashboard with Clerk Authentication 🛣️

Benefits

Middleware for Authentication

The Grand Finale: A Stable and Clean Database! 🏆

Using Prisma ORM with Next.js 15, TypeScript, and PostgreSQL

Introduction

Prerequisites

Step 1: Setting Up Next.js 15 Project

Step 2: Installing Prisma and PostgreSQL Driver

Step 3: Initializing Prisma

2) Anatomy of `schema.prisma`

Middleware (`$use`)

Client extensions (`$extends`)

Create `/api/user/[id]/route.ts` for Fetching & Updating Users:

Create `/api/user/route.ts` for Creating Users: