Linked mentions with Contentlayer


Table of Contents

  1. Usage

My ideal personal site is something in between a journal and wiki. A killer feature of wikis is bi-directional links. These are also known as metioned links or backlinks. If you’re reading a page, you can see all the pages that link to it; a great way to discover related content.

Contentlayer is a library that acts as like an ORM for markdown content. It has become popular in the Next.js ecosystem as a way to manage content for static sites. It’s easy to build on top of since all content is available through a strongly-typed, generated module.

The allDocuments array can be iterated over to find all the documents that link to a given page. Here’s a function that returns an array of backlinks for a given slug:

import { allDocuments } from "contentlayer/generated";
function getLinkedMentions(slug: string) {
  return (
      // filter out documents that don't contain a link
      // to the provided document
      .filter((doc) => doc.body.raw.includes("[[" + slug))
      // map to title and slug for rendering
      .map((doc) => ({
        title: doc.title,
        url: doc.url,


Then, in your page component, you can call this function and render the results. The example below is in Next.js, but the approach can be used broadly.

import { getLinkedMentions } from "@/lib/linked-mentions";
export default function Page({ slug }) {
  const mentions = getLinkedMentions(slug);
  return (
      <!-- page content -->
        { => (
            <a href={link.url}>{link.title}</a>