Reddit Style Title Slugs for your Next.js URLs

URLs should be designed to be shared. While building this blog engine, I was so focused on avoiding collisions between posts using uuid4 through nanoid, I forgot that links wouldn't have any meaning the the user. Fortunately I've seen a pattern with other small sites like Reddit.com or Etsy.com: include a URL friendly version of the title along with the regular page ID.

From https://example.com/watch/123↗ , you end up with https://example.com/watch/123/never-gonna-give-you-up↗ .

Let's fix it!

Converting Titles to Slugs

Creating a slug from the title is mainly done by converting characters to be URL safe, thus replacing or removing incompatible ones. Using encodeURIComponent↗ would be safe but not user friendly. á â à ä encodeURIComponent encoded would become %C3%A1%20%C3%A2%20%C3%A0%20%C3%A4, but a-a-a-a is a better slug.

If you want an out of the box solution that works with many languages, using an npm library↗ like slugify↗ might be best. I only need to support Latin alphabet↗ based languages for now, a few line of codes will suffice:

export function generateSlug(str: string): string {
    return (
        str
            // remove end whitespaces
            .trim()
            // convert space(s) to dash (-)
            .replace(/[\s]+/gi, "-")
            // break down accented characters and convert to latin letters (ex: ä -> a)
            .normalize("NFD")
            .replace(/[\u0300-\u036f]/g, "")
            // convert all remaining incompatible letters to underscore (_)
            .replace(/[^a-z0-9\-]/gi, "_")
            .toLowerCase()
    );
}

// generateSlug("Hello World!") -> "hello-world_" - punctuation is dropped
// generateSlug("Bon appétit") -> "bon-appetit" - accentuated letters converted
// generateSlug("猫") -> "_" - 😿

Good enough!

Redirecting with Next.js

The slug should be an optional part of the URL: posts/{id}(/{slug}). If the user tries to access the post without the slug, or with an incorrect slug, I will redirect them to the full URL.

Beyond dynamic routes, Next.js allows for catch all statements↗ with the [...folderName] syntax. Also it allows for redirects and error pages to be served in the initial generateMetadata step↗, before the page is rendered.

export async function generateMetadata({params: {id}}: {id: string[]}): Promise<Metadata | undefined> {
    // split the id and slug from the URL params
    const postId = id[0];
    const postTitleSlug = id[1] || "";

    let data: PostData | null = null;
    
    // fetch the post
    try {
        data = await getPost(api, postId);
    } catch (error) {
        notFound();
    }
    if (!data) {
        notFound();
    }
    
    // generate the slug and redirect if the user isn't at the right URL
    const urlTitleSlug = generateSlug(data.post.title);
    if (postTitleSlug !== urlTitleSlug) {
        redirect(`/posts/${postId}/${urlTitleSlug}`, RedirectType.replace);
    }

    return {
        title: data.post.title,
        description: data.post.description,
    };
}

export default async function(){
    // render page
}

The title is now part of the URL!

Observations

A small negative is that a malicious user could change the slug to something else and share it to misdirect others.

The process is backward and forward compatible: if links have been shared without the slug or if the title is changed, the user will be redirected to the right place.