How do I handle external links in the link picker

I am having trouble handling linking to an external URL, I am wondering if someone could point me in the right direction. Currently, my app breaks when an external link is used.

Here is my linkResolver function

import * as prismic from '@prismicio/client'
import * as prismicH from '@prismicio/helpers'
import * as prismicNext from '@prismicio/next'
import sm from './sm.json'
export const repositoryName = prismic.getRepositoryName(sm.apiEndpoint)
// Update the Link Resolver to match your project's route structure
export function linkResolver(doc) {
  switch (doc.type) {
    case 'homepage':
      return '/'
    case 'page':
      return `/${doc.uid}`
      return null
export const createClient = (config = {}) => {
  const client = prismic.createClient(sm.apiEndpoint, config)
    previewData: config.previewData,
    req: config.req
  return client

Here is an example of a button component which a link would be passed to, both internal or external

import Link from "next/link";
import {PrismicLink} from '@prismicio/react';

export default function Button ({ variant, children, ...props }) {
    let className;

    switch (variant) {
      case 'primary':
        className = 'inline-block p-4 text-lg text-white bg-black border border-black';
      case 'secondary':
        className = 'inline-block p-4 text-lg text-black bg-white border border-black';
      case 'primary-small':
        className = 'inline-block p-2 text-base font-semibold text-white bg-black border border-black';
      case 'tertiary':
        className = 'bg-gray-500 text-white';
        className = 'bg-white text-black';
    return (
      <Link className={className} {...props}>

and finally here is an example of my navigation component using the button component

import { PrismicText } from '@prismicio/react'
import Link from 'next/link'
import Button from './UI/Button'
import CustomLink from './Utility/CustomLink'

export function Navigation({ navigation }) {
    return (
        <nav className="container mx-auto flex items-center justify-between px-6 py-2">
            <Link href="/" >
                <img src={} alt={} className="h-16 w-16 object-contain" />
            <div className="flex gap-12 items-center">
                <ul className="flex gap-4">
                    {/* Renders top-level links. */}
                    { => {
                        return (
                            <li key={}>
                                <CustomLink link={}>
                <Button href={} variant="primary-small">{}</Button>
                {/* <pre>{JSON.stringify(navigation, null, 2)}</pre> */}


Hello @gavin2. have you configured your links in<PrismicProvider>?

<PrismicLink> automatically resolves your external links, but you need to use Next's Link component to > create links between internal pages.

You need to configure to use Next.js' component — as described in the setup step. You'll wrap your app with in the _app.js file and configure the internalLinkComponent prop to use Next's <Link>.

Refer to our Next's official templating docs to learn how to do this:

1 Like

Thank you for this, I will refer back to it shortly.