Replies: 1 comment
-
Thank you so much for this guide @corytheinnocent! We've recently updated the codebase to Next.js 14 so it should be the default settings now! :) |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Upgrading to Next.js 14 with Platforms
Are you looking to (somewhat) seamlessly upgrade your project to Next.js 14? I will provide you with the steps I took to make my app run smoothly with the latest update. Please note that the process may vary based on your project's specific requirements, so it's essential to thoroughly test your changes.
Step 1: Update Dependencies
The first step in upgrading to Next.js 14 is to update your project's dependencies. You should ensure that you are using Next.js 14, Experimental React, and Experimental React-DOM. Here's how you can do it:
Once you've updated your
package.json
, update your project with your package manager to install/upgrade to these new versions.Step 2: Update Image Imports
Next.js 14 has introduced changes in the way
ImageResponse
works with theImage
element. You must now import it from"_next/og"
. This change affects components that utilizenext/server
. Update your code accordingly, replacing instances ofnext/server
withnext/og
.You can also use the provided codemod tool to automate this process, but please note that it may not be up-to-date.
Step 3: Update Form Status
Next.js 14 requires you to update your form status handling. In your code, remove the "experimental_" prefix and add
// @ts-ignore
above the import statement. Make sure to perform these changes on all relevant pages.Step 4: Update Image Loading
In Next.js 14, the
onLoadingComplete
property has been renamed toonLoad
. Check your code for any images that use the old property name and update it accordingly.Step 5: Server Actions
With Next.js 14, Server Actions are no longer considered experimental. You should remove any reference to this option from your Next.js configuration, as it's now enabled by default.
Step 6: Use
remotePatterns
The
images.domain
property is deprecated and no longer used in Next.js 14. Instead, use theremotePatterns
property for your image configurations.Once you've completed these steps, your project should be ready. Hope this guide has saved someone some time and headaches!
Beta Was this translation helpful? Give feedback.
All reactions