Upgrading to 0.15.0

If you haven’t upgraded to 0.14.0 please read the upgrading guide.

Add ReactRuntimeProvider to your Next.js Custom App

If you don’t have a Custom App, you’ll need to add one. Then wrap it with ReactRuntimeProvider and pass your runtime instance to it.

pages/_app.tsx
import { runtime } from "@/makeswift/runtime"
import { ReactRuntimeProvider } from "@makeswift/runtime/next"
import type { AppProps } from "next/app"
export default function App({ Component, pageProps }: AppProps) {
return (
<ReactRuntimeProvider runtime={runtime}>
<Component {...pageProps} />
</ReactRuntimeProvider>
)
}

Remove runtime prop from Page component

pages/[[...path]].tsx
import { Page as MakeswiftPage } from '@makeswift/runtime/next'
import { runtime } from '@/makeswift/runtime'
/* ... */
export default function Page({ snapshot }: Props) {
- return <MakeswiftPage snapshot={snapshot} runtime={runtime} />
+ return <MakeswiftPage snapshot={snapshot} />
}

Use React.lazy instead of next/dynamic for code-splitting

makeswift/components.tsx
import { runtime } from '@/makeswift/runtime'
- import dynamic from 'next/dynamic'
- import { forwardNextDynamicRef } from '@makeswift/runtime/next'
+ import { lazy } from 'react'
runtime.registerComponent(
- forwardNextDynamicRef(patch =>
- dynamic(() => patch(import('./Button').then(({ Button }) => Button)))
- )
+ lazy(() => import('./Button')),
{ type: 'Button', label: 'Button', props: {} }
)

Here is the link to the official release notes.