Makeswift Home
Makeswift on GitHub

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>
    )
  }
}