How do I handle external links in the link picker

Developing with Prismic
1

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>
    )
}
3

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
4

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

6

Handling external links in a link picker within a web application involves providing users with a user-friendly way to select, input, and manage links that lead to external websites or resources. Here's a guide on how to handle external links effectively in a link picker:

  1. Link Picker Component:
  • Create a link picker component or interface that allows users to choose or input links. This component should have fields for the link URL, link text, and any other relevant information.
  1. Distinguish External Links:
  • Clearly distinguish external links from internal links (links within your own website). You can do this by adding an icon, label, or indicator that signifies the link is external.
  1. Input Validation:
  • Implement validation to ensure that the Natural link entered is in a valid URL format. Provide feedback if the input is incorrect.