Self Healing URLs

4 min readDec 8, 2023

Check out my implementation of a ✨ self-healing-urls ✨

Self-healing URLs refer to an approach where URLs are designed to adapt or correct themselves when broken or when the linked content changes. These URLs are created dynamically to redirect users to the correct content even if the initial link is outdated or invalid.

For instance, a self-healing URL might include a unique identifier or metadata that allows it to recognize when the content it points to has changed or moved. When someone accesses this URL, the system behind it checks the identifier or metadata to determine the current location or version of the content and redirects the user accordingly.

Try it out now!!

Medium uses Self-healing URLs, try changing the slug without tampering with the index number at the end

Hit enter and BANG!!🎉, you get redirected to the original URL.

This approach is especially useful for maintaining links in dynamic environments like content management systems, where content is frequently updated, moved, or deleted. Self-healing URLs help ensure a smoother user experience by minimizing the impact of broken links and providing users with access to the intended content even when URLs change over time.

How do they help with SEO

Broken Link Prevention: Self-healing URLs reduce broken links, ensuring a seamless user experience. This decreases the chance of users encountering dead ends, which can negatively impact SEO rankings.
2. Consistent Indexing: By maintaining functional URLs even through content updates or changes, self-healing URLs help search engines consistently index website content. This ensures that the latest and relevant information is available to users and search engines.
3. Enhanced User Experience: Seamless navigation due to self-healing URLs improves user satisfaction. Positive user behavior metrics like reduced bounce rates and increased time on site contribute positively to SEO.

Lets try building one in Next.js 🛠️

Create a Next.js app

npx create-next-app@latest self-healing-urls

2. Accept the default options

3. Install axios

npm i axios

5. Edit the boilerplate code
./src/app/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.px-padding {
 padding-left: max(3vw, calc(50vw - 30rem));
 padding-right: max(3vw, calc(50vw - 30rem));
}

./src/app/layout.tsx

import type { Metadata } from "next";
import { Montserrat } from "next/font/google";
import "./globals.css";

const montserrat = Montserrat({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "self healing url website",
  description: "project demonstrating self healing urls",

  creator: "Vishal Kamath",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={montserrat.className}>{children}</body>
    </html>
  );
}

4. create a basic home
./src/app/page.tsx

import axios from "axios";
import Link from "next/link";

export default async function Home() {
  const allPosts = (
    await axios.get("https://jsonplaceholder.typicode.com/posts")
  ).data;

  return (
    <main className="flex min-h-screen flex-col gap-9 px-padding py-12">
      <Link href="/" className="text-xl font-semibold text-emerald-600">
        Self Healing URLs Blog
      </Link>
      <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {allPosts.map((post: any) => (
          <li
            key={post.id}
            className="flex border-[1px] border-gray-200 h-60 px-3 py-4 rounded-md flex-col gap-2"
          >
            <h2 className="font-bold">{post.title}</h2>
            <p className="text-sm text-gray-500">{post.body.slice(0, 25)}...</p>

            <Link
              href={`${post.title.replaceAll(" ", "-")}-${post.id}`}
              className="border-[1px] text-center text-sm py-2 rounded-md mt-auto border-emerald-400 hover:bg-emerald-200"
            >
              Read More
            </Link>
          </li>
        ))}
      </ul>
    </main>
  );
}

5. create a post page
./src/app/\[slug\]/page.tsx

import Link from "next/link";
import axios from "axios";
import { notFound, redirect } from "next/navigation";

export default async function Post({ params }: { params: { slug: string } }) {
  const slugArray = params.slug.split("-");
  const id = slugArray.pop();
  const slug = slugArray.join("-");

  const post = (
    await axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
  ).data;

  if (!post.id) {
    notFound();
  }

  if (slug !== post.title.replaceAll(" ", "-")) {
    redirect(`${post.title.replaceAll(" ", "-")}-${post.id}`);
  }

  const user = (
    await axios.get(`https://jsonplaceholder.typicode.com/users/${post.userId}`)
  ).data;
  
  return (
    <main className="flex min-h-screen flex-col gap-9 px-padding py-12">
      <Link href="/" className="text-xl font-semibold text-emerald-600">
        Self Healing URLs Blog
      </Link>

      <article className="flex flex-col gap-6">
        <h2 className="text-4xl">{post.title}</h2>
        <i className="text-sm text-gray-500">by {user.name}</i>
        <p>{post.body}</p>
      </article>

      <Link
        href="/"
        className="border-[1px] text-center text-sm py-2 rounded-md w-24 border-emerald-400 hover:bg-emerald-200"
      >
        Back
      </Link>
    </main>
  );
}

full code: https://github.com/Vishal-Kamath/self-healing-urls
Check out my implementation of a ✨ self-healing-urls ✨

GitHub: https://github.com/Vishal-Kamath.
LinkedIn: https://www.linkedin.com/in/vishalkamath853
Twitter: https://twitter.com/VishalKamath853

Self Healing URLs

Try it out now!!

How do they help with SEO

Lets try building one in Next.js 🛠️

Written by Vishal Kamath