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.

Anchor`index.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>
    )
  }
}