Discussion of querying internal links in Sanity and using routes to separate pages for flexibility.

{
  "_key": "c371572bc417",
  "_type": "internalLink",
  "item": {
    "_ref": "532b3294-5c63-42bd-9157-174796b2f706",
    "_type": "reference"
  },
  "slug": "new-revolutionary-product"
}

_type == "internalLink" => {
            ...,
            "slug": *[_type == "route" && page._ref == ^.item._ref]{slug}
          }

_type == "internalLink" => {
            ...,
            "slug": item->slug.current
          }

[
  {
    "_key": "2fc431634c3b",
    "_type": "link",
    "href": "<https://bryanklein.com>"
  },
  {
    "_key": "c371572bc417",
    "_type": "internalLink",
    "item": {
      "_ref": "532b3294-5c63-42bd-9157-174796b2f706",
      "_type": "reference"
    },
    "slug": null
  }
]

        annotations: [
          {
            name: 'internalLink',
            type: 'object',
            icon: AiOutlineLink,
            title: 'Internal link',
            fields: [
              {
                name: 'reference',
                type: 'reference',
                title: 'Reference',
                to: [
                  { type: 'page' },
                  { type: 'product' }
                ]
              },
              {
                name: 'linkType',
                title: 'Link Type',
                type: "string",
                options: {
                  list: [
                    { title: "Button", value: "button" },
                    { title: "Text", value: "text" },
                    { title: "Text + Arrow", value: "text-arrow" }
                  ],
                  layout: "dropdown"
                }
              }
            ]
          }, 

import React from 'react';

const InternalLinkRender = ({ children }) => <span style={{backgroundColor:'lightblue'}}>{children}</span>;

export default {
  title: 'Internal Link',
  name: 'internalLink',
  type: 'object',
  description: 'Locate a document you want to link to',
  fields: [
    {
      name: 'item',
      type: 'reference',
      to: [{ type: 'page' }]
    }
  ],
  blockEditor: {
    icon: () => '🔗',
    render: InternalLinkRender,
  },
};

"slug":{
  "_createdAt": "2019-03-15T13:53:45Z",
  "_id": "532b3294-5c63-42bd-9157-174796b2f706",
  "_rev": "45Isps23253Yjlaq27Gb6c",
  "_type": "page",
  "_updatedAt": "2021-03-25T17:35:31Z",
  "content": [
    {
      "_key": "e37000e4aea5",
      "_type": "hero",
      "backgroundImage": {
        "_type": "image",
        "asset": {
          "_ref": "image-99daef03a3557b742dd9de05e3b75aba0ad2a402-1350x900-png",
          "_type": "reference"
        }
      },
      "heading": "We change industries!",
      "tagline": [
        {
          "_key": "2f2895682c0b",
          "_type": "block",
          "children": [
            {
              "_key": "2f2895682c0b0",
              "_type": "span",
              "marks": [],
              "text": "Disruptive implementations for the unknown future."
            }
          ],
          "markDefs": [],
          "style": "normal"
        }
      ]
    }
  ],
  "description": "This will change how you think about technology. We just need to figure out what it is first.",
  "openGraphImage": {
    "_type": "image",
    "asset": {
      "_ref": "image-99daef03a3557b742dd9de05e3b75aba0ad2a402-1350x900-png",
      "_type": "reference"
    }
  },
  "title": "Our upcoming groundbreaking service"
}

"slug": *[_type == "route" && page._ref == ^.item._ref][0].slug.current

const serializers = {
  types: {
    embedHTML: EmbedHTML,
    figure: Figure
  },
  marks: {
    internalLink: ({mark, children}) => {
      const href = `/${mark.slug}`
      return <a href={href}>{children}</a>
    },
    link: ({mark, children}) => {
      // Read <https://css-tricks.com/use-target_blank/>
      const { blank, href } = mark
      return blank ?
        &lt;a href={href} target="_blank" rel="noopener noreferer"&gt;{children}&lt;/a&gt;
        : &lt;a href={href}&gt;{children}&lt;/a&gt;
    }
  }
}