Preview feature for dynamic routes Nextjs

Developing with Prismic
1

Hello,
I'm using Nextjs as SSG on Vercel and I've connected the deployment with Prismic Webhooks.

So when The content management team creates a Prismic page for all dynamic routes ex. /blogs/[id] We can't preview them on the website because the page is not been published yet so the route is not defined in the GetStaticPaths function... I'm using ex. client.getAllByType('blogs') function to get all the documents from Prismic which does not provide the unpublish pages

Is there any solution to fix the preview issue for the unpublish pages
Thanks!!

2

Hi @mouaz.al-molkey ,

This shouldn't be a blocker for the preview system. Can you tell me more about your preview setup, your route resolver, your node modules versions, maybe you can share your code with us?

Thanks.

3

Hello @Phil ,

Were you able to resolve this issue?
I'm in the same situation, and I'd like to know how I handle it.

4

Hi @yamazaki ,

Same questions. Can you tell me more about your preview setup, your route resolver, your node modules versions, maybe you can share your code with us?

Thanks.

5

Hi @Phil,

Thank you for your reply.
Here’s an overview of my setup:

node modules versions

  • Node.js v20.11.0

FYI

  • "next": "14.1.0",
  • "@prismicio/client": "^7.3.1",
  • "@prismicio/next": "^1.5.0",
  • "@prismicio/react": "^2.7.3",

My route resolver

The following route configuration is used to handle document URLs:

/**
 * Route Resolver configuration for document URL resolution.
 * For more details: {@link https://prismic.io/docs/route-resolver#route-resolver}
 */
const routes: prismic.ClientConfig['routes'] = [
	{ type: 'home', uid: 'home', path: '/' },
	{ type: 'about', uid: 'about', path: '/about' },
	{ type: 'branding', uid: 'branding', path: '/branding' },
	{ type: 'brands', uid: 'brands', path: '/brands' },
	{ type: 'career', uid: 'career', path: '/career' },
	{ type: 'contact', uid: 'contact', path: '/contact' },
	{ type: 'privacy_policy', uid: 'privacy_policy', path: '/privacy-policy' },
	{ type: 'service', uid: 'service', path: '/service' },
	{ type: 'works', uid: 'works', path: '/works' },
	{ type: 'work', uid: 'work', path: '/work/:uid' },
]

If you’re open to it, I can share my code privately. Do you have a preferred way to review it.

Best regards,

7

Thank you this is helpful, I will need to see the you app directory structure and your preview file code.

Can you share your github link here?

8

Hello @Phil ,

Thank you for following up.
Due to compliance, I’m unable to share a direct link to the app. However, here is some code related to the preview function:

			<body>

                                . . .

				<Script
					strategy='afterInteractive'
					src='https://static.cdn.prismic.io/prismic.js?new=true&repo=****'
				></Script>
			</body>
		</html>

Following the instructions on the settings page, I added this script just before the closing </body> tag in layout.ts.

スクリーンショット 2024-11-11 9.51.14
スクリーンショット 2024-11-11 9.51.141230×508 30.7 KB

I hope this provides the information you need. Please let me know if you have any further questions.

9

You don't need to include this script if you're using Next.js. Can you follow the preview settings steps here:

You can also see how to do this from our example projects:

11

Hi @Phil

I followed this settings and it didn't work.

When I tried to see preview pages, this error was displayed at the terminal;

[Error]: Page with dynamic = "error" couldn't be rendered statically because it used request.url.

As I expected, it doesn't seem to be possible to see preview pages as SSG.
Once again, I appreciate you helping me.

12

Can you show me how you initialise your client and do your queries on the dynamic pages?

Do you have a link to your project on Github?