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!
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
Thanks,
Racheal.
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?
@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
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.
Thank you @racheal.orukele! Yeah I got the question answered on the GitHub issue I created but thank you for following up!
1 Like