NextJS v12 Documentation

Developing with Prismic
1

Hello,

The NextJS Docs for Prismic seem to use NextJS 13. I am running a NextJS app on v12.2.5 and am having quite a few issues despite following the "Pages Router" part of the tutorial. For example, my NextJS app wont even load pages anymore and am getting the error: Module not found: Can't resolve 'next/headers' after adding the <PrismicPreview repositoryName={repositoryName} /> component to my _app.ts file like specified in the docs. Are there specific NextJS v12 docs? Or am I doing something wrong that is potentially a known issue? Any help would be greatly appreciated!

3

Hello @tylerpashigian,

Welcome to the Prismic, and thanks for reaching out!

There isn't a different documentation for Next.js v12; the same docs can be used for both versions.

The error occurred because you're importing <PrismicPreview /> from 'next/headers', which it shouldn't be, PrismicPreview should be imported from '@prismicio/next'.

Run the setup command npx @slicemachine/init@latest, which will install all the required packages to set up Prismic with Next.js.

Double-check using the docs: https://prismic.io/docs/setup-nextjs to make sure you installed all the required packages to set up Prismic with Next.js.

I hope this helps :slightly_smiling_face:

Thanks,
Racheal.

4

Hi @racheal.orukele,

Thanks for the quick response. Yes I did follow that setup documentation and actually just tried from scratch and am still getting the same error when adding the <PrismicPreview /> to my _app.tsx file. Also, here are my imports:

import { PrismicPreview } from '@prismicio/next';
import { repositoryName } from '@/prismicio';

So <PrismicPreview /> is being imported from '@prismicio/next'. I followed every step in the initial documentation setup. Any other suggestion?

5

@racheal.orukele I am also getting this issue on pages where I am trying to load data from a page set up on the prismic GUI. I followed these docs: Fetch Data in Next.js - Documentation - Prismic

6

Hello @tylerpashigian,

Sorry for the confusion. I saw that you opened an issue on GitHub about this: Module not found: Can't resolve 'next/headers' - PrismicPreview · Issue #78 · prismicio/prismic-next · GitHub and you were correct. I got the same error when running a Next.js 12 project.

And as @angeloashmore stated, If you are using Next.js 12, you can install the latest 0.1 version with the following command:

npm install @prismicio/next@^0.1

You can find technical documentation for v0.1 here: @prismicio/next Technical Reference - Documentation - Prismic.

Let me know if you have further questions.

Thanks,
Racheal.

7

Thank you @racheal.orukele! Yeah I got the question answered on the GitHub issue I created but thank you for following up!

1 Like