Update next-transpile-modules, next/link, and next/image for Next.js 13 support #296
Conversation
🦋 Changeset detectedLatest commit: df110e0 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
These changes look good, but I don't think we can ship them as-is since it would likely break users in Next.js v12, right? For example, the useLegacyBehavior prop is only in next/link when using Next.js v13?
I think that the way that we handle support for Next.js v13 is similar to how React introduced the useSyncExternalStore for React 18. They released a package use-sync-external-store, and that package had a shim use-sync-external-store/shim. A shim is a module that will transparently use the native library if it's available and otherwise it provides an appropriate replacement. In the case of useSyncExternalStore, if you're on React v18 is just uses the one from React, otherwise it falls back to a close implementation for React < v17.
We don't need to make a separate package, but we can create shim modules for Next.js features so that we can ship the same behavior across different versions of Next.js (e.g., next-transpile-modules, new next/image, and new next/link).
fikrikarim
force-pushed
the
fikri/next13
branch
from
c6774de
to
e0a253d
Compare
PRD-908 Update Image component for Next.js v13
Progress: Seeing a weird hydration issue when using |
fikrikarim
changed the title
fikrikarim
force-pushed
the
fikri/next13
branch
from
c960f73
to
cc31c6a
Compare
packages/runtime/src/components/shared/CompatNextImage/CompatNextImage.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
- Should we also update Next.js, React, etc. in the peer dependencies of the package.json for that first commit?
- Any reason why we don't have a changeset for each commit? It's ok not to have one for each commit, but we should make sure that the final changelog has a very clear explanation of what changed, why, and how it will impact a user if they upgrade as well as migration instructions if relevant
packages/runtime/src/runtimes/react/components/LiveProvider.tsx
Outdated
Show resolved
Hide resolved
packages/runtime/src/runtimes/react/components/PreviewProvider.tsx
Outdated
Show resolved
Hide resolved
I think we should update the peer dependencies on the last commit, as we need all the previous commits before we can support the Next.js v13.
Yeah, I don't think we need a changeset for a refactor or anything that doesn't change the external behavior. Yes, I agree, let's do the final changelog together. |
fikrikarim
force-pushed
the
fikri/next13
branch
from
e20a799
to
a660c58
Compare
fikrikarim
force-pushed
the
fikri/next13
branch
from
a660c58
to
eb5071c
Compare
We had error "Error: This Suspense boundary received an update before it finished hydrating." when upgrading to Next.js v13. This was because we were calling setStore before the page finished hydrating. We fix this by splitting the RuntimeProvider to two different providers: PreviewProvider, and LiveProvider. So instead of using an useEffect to rerender the correct provider, we check for the preview prop passed from the snapshot.
We don't support Next.js below version 12.2 anymore, so it's safe to remove unstable_revalidate.
Somehow after commit "d9725fc refactor: split the RuntimeProvider", texts are not editable on the builder.
fikrikarim
force-pushed
the
fikri/next13
branch
from
eb5071c
to
df110e0
Compare
Resolves PRD-906, PRD-907, PRD-908, PRD-911
Actually, we don't need
next-transpile-modulesanymore from Next.js v13.1, but we probably need to update it to support v13.0.So far, I haven't seen any issues from updating
next-transpile-moduleson Next v12.