🚀 Ensuring Unique Slugs in Next.js 15 with Prisma & Slugify

Creating SEO-friendly slugs is essential for URLs in Next.js applications. However, ensuring they remain unique can be tricky—especially when dealing with dynamic content like blog posts.

In this guide, we’ll explore an efficient recursive approach to generate unique slugs using Prisma and slugify in Next.js 15! 🔥

---

🌟 Why Unique Slugs Matter?

✅ SEO Optimization – Clean, readable URLs improve search rankings
✅ User-Friendly Links – Easy to share & understand
✅ Prevents Collisions – Avoid duplicate slugs for different posts

---

🛠 Implementing Recursive Slug Generation

The following function:
✔ Converts a title into a slug
✔ Checks if the slug already exists in the database
✔ Recursively appends a suffix if the slug is taken

import db from "@/lib/db";
import slugify from "slugify";

/**
 * Generates a unique slug recursively.
 * @param input - The string to generate the slug from (e.g., a post title).
 * @param model - The Prisma model to check for existing slugs (e.g., "post").
 * @param suffix - Optional suffix to append for uniqueness (used internally in recursion).
 * @returns A unique slug.
 */
export default async function generateSlug(
  input: string,
  model: "post",
  suffix: number = 0,
): Promise<string> {
  const baseSlug = slugify(input, {
    lower: true,
    strict: true,
    trim: true,
  });

  const slug = suffix === 0 ? baseSlug : `${baseSlug}-${suffix}`;

  const existingRecord = await db[model].findUnique({
    where: { slug },
  });

  if (!existingRecord) {
    return slug;
  }

  return generateSlug(input, model, suffix + 1);
}

---

🔍 How This Works

1️⃣ Converts the input string into a lowercase, URL-friendly slug
2️⃣ Checks the database if a record with the same slug exists
3️⃣ If found, recursively calls itself with a numeric suffix (e.g., my-post, my-post-1, my-post-2...)
4️⃣ Returns the first available unique slug

---

📌 Example Usage in Next.js 15

You can use this function when creating new posts dynamically:

const createPost = async (title: string, content: string) => {
  const slug = await generateSlug(title, "post");

  await db.post.create({
    data: {
      title,
      slug,
      content,
    },
  });

  console.log(`✅ New post created with slug: ${slug}`);
};

✅ Calling createPost("My Next.js Guide", "Some content")
🚀 Generates my-nextjs-guide, or if taken, my-nextjs-guide-1, my-nextjs-guide-2, etc.

---

⚡ Key Benefits

🔥 Handles Duplicates Automatically – Ensures slugs remain unique
⚡ SEO & Readability – Clean and structured URLs
🛠 Works Seamlessly with Prisma – No extra logic needed in API routes

🚀 Final Thoughts

Slugs are a critical part of a Next.js app’s SEO and usability. With this recursive approach, you ensure that every post, page, or product gets a unique and clean URL, automatically.

💡 Would you use this approach in your project? Let’s discuss in the comments! 🚀