Advanced setup
For advanced use cases when integrating Makeswift with Next.js.
AnchorBefore you start
If your Next.js app is complicated enough where the manual setup guide isn't cutting it for you, this guide contains some pointers on how to do more advanced configuration with Next.js.
Make sure you've read the manual setup guide before reading this one.
AnchorCustom live route
In an existing Next.js app you might have pages that conflict with a top-level optional catch-all
route like [[...path]].js
. You might also want to adopt Makeswift incrementally for specific parts
of your Next.js app instead. A custom implementation of a live page route can help with these use
cases.
Anchorindex.js
conflicts with [[...path]].js
If Next.js shows an error about an index.js
file conflicting with the
optional catch-all route
then you can change it to a regular catch-all route: [...path].js
.
AnchorRenaming the live route
If you want to use a different name for the live route then make sure that you map the dynamic route
parameter to the one expected by Makeswift's getStaticProps
.
// pages/[...slug].js
import { getStaticProps as makeswiftGetStaticProps } from '@makeswift/runtime/next'
export { getStaticPaths, Page as default } from '@makeswift/runtime/next'
export async function getStaticProps(ctx) {
const makeswiftResult = await makeswiftGetStaticProps({
...ctx,
// note here that the page is named `[...slug].js`
params: { path: ctx.params.slug },
})
return { ...makeswiftResult, props: { ...makeswiftResult.props } }
}
AnchorWithout a dynamic route
It's possible to use Makeswift for a page that isn't a dynamic route. The appropriate parameters
have to be passed in to getStaticProps
, though.
// pages/about.js
import { getStaticProps as makeswiftGetStaticProps } from '@makeswift/runtime/next'
export { Page as default } from '@makeswift/runtime/next'
export async function getStaticProps(ctx) {
const makeswiftResult = await makeswiftGetStaticProps({
...ctx,
params: { path: ['about'] },
})
return { ...makeswiftResult, props: { ...makeswiftResult.props } }
}
AnchorIn a nested route
If you want to have a sub-set of your site be managed by Makeswift—like your blog, for example—you
can configure a nested dynamic route but must make sure to map the params for getStaticProps
.
// pages/blog/[slug].js
import { getStaticProps as makeswiftGetStaticProps } from '@makeswift/runtime/next'
export { Page as default } from '@makeswift/runtime/next'
export async function getStaticProps(ctx) {
const makeswiftResult = await makeswiftGetStaticProps({
// note that `ctx.params.slug` is a `string` here and not an `array` since the dynamic route
// isn't a catch-all.
...ctx,
params: { path: ['blog', ctx.params.slug] },
})
return { ...makeswiftResult, props: { ...makeswiftResult.props } }
}
AnchorExtending the custom Document
If you are integrating Makeswift to an existing Next.js app and are already using a custom
Document
you can extend the @makeswift/runtime/next
Document
instead of the one exported by
next/document
.
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
import { Document } from '@makeswift/runtime/next'
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}