Hi Alex, I’m not a pro in it too and I ran into the same question and dig deeper myself.
As I understood, you’re using the “Loader” type of the project that’s set by default? Then it’s not actually stored on GitHub and it’s loaded dynamically by the loader code you got on GitHub.
Here is how it works:
Where are the pages stored?
- Plasmic Platform:
• The actual content, layout, and components for the pages are created and stored within Plasmic’s own platform, not in the local file system of your Next.js project. Plasmic acts as a content management system (CMS) and design tool.
• Pages are built visually in the Plasmic editor, and the data for these pages (like the layout, components, and styles) is stored on Plasmic’s servers.
- Page Fetching:
• The PLASMIC object in your code (which is imported from @plasmicapp/loader-nextjs) is responsible for fetching the relevant data for each page. This happens dynamically based on the route or the configuration in getStaticProps.
• The call to PLASMIC.maybeFetchComponentData in getStaticProps retrieves the data (the structure, components, and content) for a specific page or component from Plasmic’s servers.
- Dynamic Routing:
• getStaticPaths fetches the available page paths using PLASMIC.fetchPages(), which queries the Plasmic platform for all published pages. The paths are then dynamically handled by Next.js using a catch-all route.
• The pages are effectively rendered dynamically based on this Plasmic data, rather than being stored as static files in the file system.
Page Rendering Process:
• When a user navigates to a URL, the relevant Plasmic page data is fetched via PLASMIC.maybeFetchComponentData.
• The page data is rendered into a React component (PlasmicComponent) inside the PlasmicRootProvider, which takes care of providing the necessary context and data for rendering.