Upgrading
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.
Was this page helpful?