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.
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
. You must render the <PreviewModeScript>
component inside <Head>
. Without
<PreviewModeScript>
the Makeswift builder will always show your published page instead of the
draft version.
// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
import { Document, PreviewModeScript } from '@makeswift/runtime/next'
export default class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<PreviewModeScript isPreview={this.props.__NEXT_DATA__.isPreview} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}