Can't set up Prismic with NextJS 13

i am trying to use nextjs 13 with prismic but a got an error when put The PrismicPreview in the layout file.

  • I also tryed to use template file put got same error.
  • When i remove PrismicPreview component the error leave it

The Error that i got is
TypeError: Cannot read properties of null (reading 'basePath')

'use client';

import { PrismicProvider } from '@prismicio/react';
import React from 'react';

import Link from 'next/link';
import { PrismicPreview } from '@prismicio/next';
import Providers from './providers';

import { repositoryName, linkResolver } from '../lib/prismicio';

function RootLayout({ children }: { children: React.ReactNode }) {
  return (
      internalLinkComponent={({ href, ...props }) => (
        <Link href={href}>
          <a {...props} />
      <html lang="pt-br">
          <link rel="preconnect" href="" />
          <meta charSet="UTF-8" />
          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
            content="width=device-width, initial-scale=1.0"
          <PrismicPreview repositoryName={repositoryName}>

export default RootLayout;

Hi @souzamatheus8174

Thanks for reaching out,

Next.js 13 is not yet fully supported with Prismic but you can check this thread that might be helpful.

1 Like

Thanks for the shout out Fares! I want to share a GitHub thread where we also talked about this more. TL;DR — the nested layouts / app folder is still in beta. Prismic is fully supporting the new next/image in Next 13 though!

1 Like

Thanks for support and I got it.

The preview mode is broken in the page directory so for now we can't use it in app directory then i just remove the PrismicProvider and it work.

1 Like