PrismicRichText & PrismicLink with Next 13 Issue

[nmastroianni]

My Feature Request is Related to a Problem

I am using Prismic with Next 13. When I use , it errors due to the breaking change with next/link. next/link no longer allows the nested tag. The error does say we can use the legacy behavior. However, this can't be implemented using PrismicRichText. See error below.

Can we add support for Next 13 to this?

Or maybe this will be moved to the @prismicio/next package?

Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

[hafiztblr]

any updates for this question??

[angeloashmore]

Hi @nmastroianni and @hafiztblr,

@prismicio/react's <PrismicLink> component can be used in Next.js 13. You may need to update your internalLinkComponent setting to not use the nested <a>.

// pages/_app.js

import Link from 'next/link'
import { PrismicProvider } from '@prismicio/react'
import { PrismicPreview } from '@prismicio/next'
import { repositoryName } from '../prismicio'

export default function App({ Component, pageProps }) {
  return (
    <PrismicProvider internalLinkComponent={(props) => <Link {...props} />}>
      <PrismicPreview repositoryName={repositoryName}>
        <Component {...pageProps} />
      </PrismicPreview>
    </PrismicProvider>
  )
}

Source: https://prismic.io/docs/setup-nextjs#add-prismicprovider-and-prismicpreview

Note that internalLinkComponent passes next/link without a nested <a>.

<PrismicRichText> uses <PrismicLink> by default, so changing internalLinkComponent will change links in Rich Text content.

---

I'm going to close this issue since both <PrismicLink> and <PrismicRichText> are supported in Next.js 13, but please comment here if you are still experiencing this issue. Thank you!