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 draft mode in the Makeswift builder.
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.tsx
file. Learn more about registering components.
components.tsx
file must be imported in three different places:
src/makeswift/components.tsx
file here to ensure
your registered components are available in the builder.MakeswiftProvider
component created in the last step and import the registered components.
[[...path]]
.
This catch-all route will fetch page data from Makeswift
and pass it to be rendered in the Page
component.
src/app/page.tsx
file to ensure that all pages (including the home page) are managed by Makeswift.
/
. If you wanted to have a hard-coded home page (not managed
by Makeswift), you could use a (non-optional) catch-all route which does not
match the parent route and uses single brackets instead (ex. [...path]
).src/app/api/makeswift/[...makeswift]/route.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.