I'm working on a website that uses Next.js as a frontend and Strapi as a backend.

In Strapi I have pages and within them I have one page that is published (homepage) and another page that isn't (about); I want to be able to preview changes on the unpublished page, but as it's not published I'm getting a 404 error whenever I visit the page.

I have a [page].js dynamic route at the root of the document to grab any pages (homepage, about, ...) and display their content. It works fine if I visit example.com/homepage — I see the content no problem.

If I visit example.com/about I get a 404 error, as this page isn't published and therefore doesn't technically exist yet.

In Postman I can run a query like this:

http://example.com:1337/pages?slug=about&_publicationState=preview&published_at_null=true

And I can see the unpublished about page data. In theory then I could pass those extra flags (_publicationState, etc) to my fetch query and be able to see the unpublished data.

The problem is when I visit example.com/about this page doesn't exist so instead of loading up [page].js it's loading 404.js instead and so my query is never ran.

Hope this makes sense! I need /about to run [page].js even though it's unpublished.