Can't set up Prismic with NextJS 13

Developing with Prismic
1

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 (
    <PrismicProvider
      linkResolver={linkResolver}
      internalLinkComponent={({ href, ...props }) => (
        <Link href={href}>
          <a {...props} />
        </Link>
      )}
    >
      <html lang="pt-br">
        <head>
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="true"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
            rel="stylesheet"
          />
          <meta charSet="UTF-8" />
          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
          />
        </head>
        <body>
          <PrismicPreview repositoryName={repositoryName}>
            <Providers>{children}</Providers>
          </PrismicPreview>
        </body>
      </html>
    </PrismicProvider>
  );
}

export default RootLayout;
5

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
6

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
7

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