Next.js 14 preview toolbar not visible

Developing with Prismic
1

Hi guys, The preview toolbar is still not showing up for my nextjs 14 app router application

image
image1920×964 205 KB

Also in localhost also its not showing

2

Hi @linkedinfy ,

There are some known issues with Next.js and the preview system discussed here:

3

I'm still facing this problem

I can preview the post on prod website it shows up but when I save and published it the website breaks
And on vercel log im getting this issue

`F [Error]: https://blogslinkedinfy.prismic.io/previews/ZkoYqBIAACkA19Gp:ZkyNcRIAACkA25n3?websitePreviewId=ZgXlZBEAACQAFW2h not found
    at N.fetch (/var/task/.next/server/chunks/6445.js:1:12840)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async N.get (/var/task/.next/server/chunks/6445.js:1:5910)
    at async N.dangerouslyGetAll (/var/task/.next/server/chunks/6445.js:1:6440)
    at async N.getAllByType (/var/task/.next/server/chunks/6445.js:1:7200)
    at async /var/task/.next/server/app/blog/page.js:1:3125 {
  url: 'https://blogslinkedinfy.cdn.prismic.io/api/v2/documents/search?q=%5B%5Bat%28document.type%2C+%22BlogPost%22%29%5D%5D&orderings=%5Bdata.publish_date+desc%2Cdocument.first_publication_date+desc%5D&pageSize=100&ref=https%3A%2F%2Fblogslinkedinfy.prismic.io%2Fpreviews%2FZkoYqBIAACkA19Gp%3AZkyNcRIAACkA25n3%3FwebsitePreviewId%3DZgXlZBEAACQAFW2h&routes=%5B%7B%22type%22%3A%22BlogPost%22%2C%22path%22%3A%22%2Fblog%2F%3Auid%22%7D%5D',
  response: {
    type: 'api_notfound_error',
    message: 'https://blogslinkedinfy.prismic.io/previews/ZkoYqBIAACkA19Gp:ZkyNcRIAACkA25n3?websitePreviewId=ZgXlZBEAACQAFW2h not found'
  },
  digest: '2246251981'
}

The page is then displayed after 10-20 mins but for 10-20 the website stays broken

4

@Phil Pls could you help

5

Hi @linkedinfy,

How are previews set up in your project?

Are you doing any sort of caching?

Have you cleared your broswers cookies or tried in a different browser?

Thanks.

8

@Phil

I have improted the preview toolbar in the root layout of the project
and I am using normal nextjs application and getting the details from prisimic like this

export default async function Blog() {
  const client = createClient();
  const blogs = await client.getAllByType("BlogPost", {
    orderings: [
      { field: "data.publish_date", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
  });

and passing it to diffrent components

 {blogs.map((blog) => (
            <BlogCard blog={blog} key={blog.uid} />
 ))}

Also I have noticed the toolbar doesnt show up in brave and chrome browser but its visible in arc browser

12

Are you blocking 3rd party cookies in your browser?

Have you consulted our troubleshooting doc?