src
directory and have the following path aliases configured.
@makeswift/runtime
package. This package contains all of the necessary
code to integrate Makeswift into your Next.js app.
Makeswift
client requires a site API key from Makeswift. In the Makeswift builder, go to Settings > Host and copy the API key for the site.
.env.local
file and paste the snippet below.
src/makeswift
.
src/makeswift
.
nextConfig
. The Makeswift Next.js plugin whitelists Makeswift image domains and sets up rewrites to enable preview mode in the Makeswift builder.
src/pages/_document.ts
and export Document
from @makeswift/runtime/next/document
:
_document.ts
, you can extend the Document
from @makeswift/runtime/next/document
instead.
Example of extending an existing document
src/makeswift/components.tsx
. In this example, only one component is registered. However, as you register more components, we recommend creating separate files for each component and rolling up the imports in the src/makeswift/components.ts
file. Learn more about registering components.
components.tsx
file must be imported in three different places:
ReactRuntimeProvider
component.
[[...path]].tsx
. You will use this route to fetch page snapshots from the Makeswift
client and render them using the Page
component.
index.tsx
file inside of the pages
directory and you’d like to manage that page in code (not in Makeswift), you will need to name the file [...path].tsx
instead of [[...path]].tsx
. Otherwise, you’ll need to delete it to let the root page be managed in Makeswift. For more information about the differences between catch-all and optional catch-all segments, refer to the Next.js Catch-all segments documentation.
path
param. For example, if the filename is [[...slug]].tsx
instead of [[...path]].tsx
, then the param name is slug
. Because this is an optional catch-all route, there are no params when visiting the index (i.e., /
) path. The path
param defaults to an empty array.
fallback: 'blocking'
is used here so that your Next.js app doesn’t need to be re-deployed whenever a new Makeswift page is created.
revalidate
field isn’t added to the returned value of getStaticProps
because
Makeswift pages are automatically revalidated using
on-demand revalidation
by leveraging the Makeswift API handler.
src/pages/api/makeswift/[...makeswift].ts
.
.js
or .ts
.http://localhost:3000
.
3000
is already in use, Next.js will try port 3001
, then 3002
, and so forth until it finds an
unused port.
3000
, the app’s URL should be
http://localhost:3000
.
http://localhost:3000
. You can keep this site for local development.