Friendly URLs: Why They Matter and How to Create Them

Friendly URLs: Why They Matter and How to Create Them

When building a website, friendly URLs (also known as human-readable URLs) are very important. They improve SEO, make navigation easier, and help users understand the content before clicking.

Example

✅ Friendly URL

https://myblog.com/posts/how-to-make-friendly-urls

❌ Bad URL

https://myblog.com/posts/12345

Why Friendly URLs Are Important

1. SEO Benefits

Search engines use URLs to understand what a page is about.
A clear and descriptive URL helps search engines index your content better and can improve ranking.

2. Better User Experience

Users can read the URL and immediately know what the page is about.
This builds trust and increases click-through rates.

3. Easier Sharing

Friendly URLs are easier to share on social media, chats, or emails.

4. Better Maintainability

Readable URLs are easier for developers to debug, remember, and manage.

Libraries I Use

• slugify – Converts text into a URL-safe slug.
• nanoid – Generates small and unique IDs.

How I Create Friendly URLs

I usually combine a readable slug with a short unique ID.
This keeps the URL clean while avoiding duplicates.

Example Code

import slugify from "slugify";
import { nanoid } from "nanoid";

const title = "How to Make Friendly URLs in Next.js";
const slug = slugify(title, { lower: true, strict: true });
const id = nanoid(5);

const url = `/posts/${slug}-${id}`;

console.log(url);
// /posts/how-to-make-friendly-urls-3fX9k

Why This Works

• slugify converts the title to lowercase and removes special characters.
• nanoid adds a short unique ID, useful when titles are similar.

Special Characters Example

const title = "Learn Next.js fast & easy!";
const slug = slugify(title, { lower: true, strict: true });

console.log(slug);
// learn-nextjs-fast-easy