Sitecore Forms with NextJs and Hybrid SSG + SSR rendering

Question

I am new to Sitecore JSS and am trying to the implement Sitecore Forms using the hybrid rendering approach [SSR+SSG] in a Sitecore 10.2 with NextJs app. Some selected paths would be SSR rendered and rest of the site will be SSG. I looked at the below links for this:

1. How could we apply Hybrid (SSG and SSR) rendering with Sitecore Nextjs
2. https://doc.sitecore.com/xp/en/developers/hd/20/sitecore-headless-development/implement-a-sitecore-form-in-a-jss-next-js-app.html
3. https://doc.sitecore.com/xp/en/developers/hd/20/sitecore-headless-development/prerendering-methods-and-data-fetching-strategies-in-jss-next-js-apps.html

And I am following the below approach:

1. Created folders at src/pages/path1 & src/pages/path2 locations
2. Copied the file from https://github.com/Sitecore/jss/blob/release/19.0.0/samples/nextjs/src/pages/%5B%5B...path%5D%5D.SSR.tsx in these folders.
3. Rename the copied file to [[...path]].tsx to catch all routes under the above paths. Now, I am getting the 404 page response when trying to open any subpage under the paths. However, I am getting the correct response if I remove the new routes and make the whole app SSR, that means, in the root [[...path]].tsx file.

Could anyone give me an example of doing this or let me know where I am going wrong?

Answer 1

As you have not mentioned how your implementation looks like, I cannot provide you a solution but you can check that you have pages created under the Sitecore tree with the same name as you have created under the Next's pages folder. The sitecorePagePropsFactory will look for same name in the Sitecore tree. For example, if you have created have something similar in your src/pages

/pages
  /posts
    /[[...path]].tsx
  /blogs
    /[[...path]].tsx

it expects the Sitecore tree to look like

/home
  /posts
   /postA
   /postB
  /blogs
   /blogA
   /blogB