Suggested pattern for Next.js catch-all pages with many shared models?

Resharing from @aziz.

Solution can be found in the nextjs-shopify starter, specifically the helper function getLayoutProps: Search · getLayoutProps · GitHub

The missing link that I was unaware of is that _app.js supports something called pageProps, which can be used to pass in prefetched data from a page’s getStaticProps into the app-wide template. So then you can pass in the fetched Builder content to a layout component, like this: nextjs-shopify/_app.tsx at master · BuilderIO/nextjs-shopify · GitHub

Info on pageProps: Advanced Features: Custom `App` | Next.js.

Thanks @aziz!

2 Likes