By Sibu Stephen
Overview of Next.js
Next.js is a trending decoupled tool based on React and server-side rendering, used by various digital agencies all around the globe to build web applications. Some Drupal 8 and Drupal 9 applications trend toward making a decoupled view for enhanced user experience and low load time. Next.js takes this decoupled view to the next level with the power of React, Server-side rendering (SSR), and cache optimization.
This article is meant to provide a glimpse into Next.js V.13.1.6, if you aren’t familiar with it, as well as a way to overcome a few of V.13.1’s kinks, including:
1) Tags within image components can render additional span tags.
2) There are no provisions for font optimization within Next.js app.
3) Link Components require an additional anchor tag.
Next.js 13.1.6 will help mitigate these issues.
Changes with V13.1.6
Node.js was bumped to V14.6.0, but V13.1.6 includes some changes concerning structure and tags that might be used in your application. Identifying these changes beforehand eliminates the element of surprise after upgrades because it adds more visibility into why the application is breaking. The points below are other necessary changes you might also want to be aware of when upgrading to V13.1.6.
- React version has been bumped from 17.0.2 to 18.2.0
- The next/image import was renamed to next/legacy/image.
- The next link child can no longer be <a>. Add the legacy behavior property to use the link tag rather than having an anchor tag. You can also remove the anchor tag if you think you want the legacy behavior. (Note - Not all legacy features are deprecated, the ones which are deprecated need to be updated.)
- The deprecated target option of next.config.js has been removed.
- The swcMinify configuration property was changed from false to true. For more information, see Next.js Compiler.
Some additional functionalities include:
- App/Directory for File System-Based Routing (Experimental).
- React Server Components.
- Async Components & Data Fetching.
- Turbopack is an alternative to Webpack.
How to upgrade to Next.Js
First, create a new branch. Then cross check if there is a Next version 12 in package.json.
In order to update to 13.1.6 run the below command (Before running next js upgrade install node 14.6 - nvm install 14.6 && nvm use v14.6):
yarn add next@latest react@latest react-dom@latest eslint-config-next@latest
This will update the next react version and eslint version.
Optionally for upgrading storybook -
npx sb@next upgrade --prerelease
requires node version 16.
(Note - If any error comes up with respect to storybook refer here.)
Package.json should be updated to 13, and React should be upgraded to Version 18.
What is likely to break while upgrading applications?
Next.js application uses images in various sections. After the upgrade, the image and link components might break the site as some customization needs to be performed after upgrading the application to V13.1.
What is the Solution for Broken Images and Links?
Changes need to be done in all the places where the Image component or Link component is used in our application while upgrading to V13.4, which is mentioned in this documentation. If you’d like more information, you can refer here.
Link component
Take this syntax <Link> <a></a></link>
Replace it with <Link></link>
And add all the attributes in the Link component.
Image component
For the `Object fit` property used in the Image component - We need to add it via the style attribute. -
Finally, check the server version using - npx-create-next-app version` which should be 13 now.
Conclusion
Next.js comes with various experimental and folder restructuring and revamping, it depends from project to project if all the changes are necessary with respect to 13 upgrades. If you decide you'd like the upgraded features, hopefully, this article has better prepared you for the types of things to expect and how to deal with them.