Next.js 14 preview toolbar not visible

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

Also in localhost also its not showing

Hi @linkedinfy ,

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

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

@Phil Pls could you help

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.

@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