Skip to main content
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.