Page Routing and Layout
Introduction
You’ve seen that the Makeswift runtime and client are essential for connecting your application to Makeswift. Now let’s look at the key entry points that hook these tools into the actual rendering of a fully editable page - entry points in the Next.js routing and layout systems.
Routing
The first and most straightforward requirement to render a Makeswift-powered page in your frontend application is a Next.js route that will respond appropriately to a given URL path.
The focus of our discussion here is on powering fully editable pages. We’ll discuss more granular editing capabilities for custom pages with MakeswiftComponent in a future section.
Since the URL path of any static Makeswift page can be set in free-form fashion, what’s needed is a route that can capture and respond to any possible URL - a route using a Next.js catch-all segment.
In Catalyst, where there are various routes for pages of different types, this is done for static pages with the following route that catches all requests not matching any other: app/[locale]/(default)/[…rest]/page.tsx.
The […rest] portion of this route path matches any number of free-form URL segments, making this info available to the page component. With the route thus intercepting all possible requests not matching other routes, the tasks it must accomplish to render the page with Makeswift are actually very straightforward:
- Load the right Makeswift “snapshot” (the component tree describing the builder-authored content for a page) based on the URL path.
- Render a root page component provided by the Makeswift runtime, passing in the snapshot data.
Loading the page snapshot is simple with the Makeswift client:
And rendering the page component is likewise straightforward:
The Page Component
The Page component defined in lib/makeswift/page.tsx simply wraps these two jobs of loading the page snapshot and rendering it. This component is what is actually imported and used in the catch-all route.
Global Layout
The final pieces necessary for integrating Makeswift into a rendered page involve adding components at the top level of the application’s layout.
React context is used to make certain data accessible anywhere in a page’s component tree, via provider components. The Makeswift runtime provides multiple such components - ReactRuntimeProvider and RootStyleRegistry - that must “wrap” the context of all pages.
By default, these are composed into a single provider component in lib/makeswift/provider.tsx.
Finally, an entry point is used to apply this provider component as well as necessary scripts for the page <head>. By default, this is done globally in app/[locale]/layout.tsx.
