Nextjs link resolver issue with Link to web page

Developing with Prismic
,
1

Describe your question/issue in detail

It seems that when using nextjs link component, when using the Link field in slicemachine, and then using a link to an external page (for example https://google.com) the component assign href="/" to the href prop, completely ignoring the url added in the field in prismic editor.

2

Hey @idrogen.dev, are you using a Route Resolver, can you share it here so we can see how you're configuring it?

4

@Pau Hi, yes!

import * as prismic from '@prismicio/client';
import * as prismicNext from '@prismicio/next';

import config from '../slicemachine.config.json';

/**
 * The project's Prismic repository name.
 */
export const repositoryName =
  process.env.NEXT_PUBLIC_PRISMIC_ENVIRONMENT || config.repositoryName;

/**
 * A list of Route Resolver objects that define how a document's `url` field is resolved.
 *
 * {@link https://prismic.io/docs/route-resolver#route-resolver}
 */

const prismicRoutes: prismic.ClientConfig['routes'] = [
  {
    type: 'page',
    path: '/:uid',
  },
  {
    type: 'article',
    path: '/blog/:uid',
  },
];

/**
 * Creates a Prismic client for the project's repository. The client is used to
 * query content from the Prismic API.
 *
 * @param config - Configuration for the Prismic client.
 */
export const createClient = async (
  config: prismicNext.CreateClientConfig = {},
) => {
  const client = prismic.createClient(repositoryName, {
    fetchOptions:
      process.env.NODE_ENV === 'production'
        ? { next: { revalidate: 5 } }
        : { next: { revalidate: 5 } },
    ...config,
  });

  const [pages, articles] = await Promise.all([
    client.getAllByType('page'),
    client.getAllByType('article'),
  ]);

  client.routes = prismicRoutes;

  prismicNext.enableAutoPreviews({
    client,
    previewData: config.previewData,
    req: config.req,
  });

  const routes = [
    ...pages.map((p) => {
      return {
        type: 'page',
        slug: `/${p.uid}`,
        uid: p.uid,
      };
    }),
    ...articles.map((a) => {
      return {
        type: 'article',
        slug: `/blog/${a.uid}`,
        uid: a.uid,
      };
    }),
  ];

  return { client, routes };
};
5

Maybe but you can try explicitly setting the href prop in your Link component when rendering links to external pages. This can be done by checking if the link is external and setting the href accordingly.