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}`
    default:
      return null
  }
}
 
export const createClient = (config = {}) => {
  const client = prismic.createClient(sm.apiEndpoint, config)
 
  prismicNext.enableAutoPreviews({
    client,
    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';
        break;
      case 'secondary':
        className = 'inline-block p-4 text-lg text-black bg-white border border-black';
        break;
      case 'primary-small':
        className = 'inline-block p-2 text-base font-semibold text-white bg-black border border-black';
        break;
      case 'tertiary':
        className = 'bg-gray-500 text-white';
        break;
      default:
        className = 'bg-white text-black';
    }
  
    return (
      <Link className={className} {...props}>
        {children}
      </Link>
    );
};

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={navigation.data.logo.url} alt={navigation.data.logo.alt} className="h-16 w-16 object-contain" />
            </Link>
            <div className="flex gap-12 items-center">
                <ul className="flex gap-4">
                    {/* Renders top-level links. */}
                    {navigation.data.slices.map((slice) => {
                        return (
                            <li key={slice.id}>
                                <CustomLink link={slice.primary.link}>
                                    {slice.primary.name}
                                </CustomLink>
                            </li>
                        )
                    })}
                </ul>
                <Button href={navigation.data.cta_link} variant="primary-small">{navigation.data.cta_text}</Button>
                {console.log(navigation.data.cta_link)}
                {/* <pre>{JSON.stringify(navigation, null, 2)}</pre> */}
            </div>

        </nav>
    )
}

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.