Upgrading to Next.js 13

Next.js 13 was released this week. I’ve not had much time to work with Netlify or Next.js recently. So this was a nice opportunity to play around again for an hour.

The upgrade command

I wasn’t lucky enough to just run the headline upgrade command that the above blog post suggests.

recipes on  upgrade-to-next-13 via ⬡ v16.14.2
at 19:30:07 ❯ npm i next@latest react@latest react-dom@latest eslint-config-next@latest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"13.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! next@"13.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^18.0.0-0" from [email protected]
npm ERR!   node_modules/next
npm ERR!     next@"13.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/ben/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ben/.npm/_logs/2022-10-28T18_30_14_743Z-debug-0.log

This is what I did

This is what I had to do, maybe this helps others.

I installed the latest versions of React.

npm i react react-dom

After this, I was then able to run the headline upgrade command.

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

The react part is redundant since we did it above, but still, copy and paste!

Breaking changes

After this, I then hit some issues with the Link component. This is documented in the release post.

The next/link child can no longer be <a>. Add the legacyBehavior prop to use the legacy behavior or remove the <a> to upgrade. A codemod is available to automatically upgrade your code.

So this was an easy fix, just remove the inner <a> tag.

Netlify change

There was one more change to make, and this was on the Netlify side. I had to update where the output of the site was.

--- netlify.toml
+++ netlify.toml
@@ -2,7 +2,7 @@
 [build]
   command = "next build"
   functions = "netlify/functions"
-  publish = "out"
+  publish = ".next"

Thoughts

I’ve not been able to work with Netlify for about 6 months. I was heavily using it at my previous job. My team wrote the whitepaper to convince the business it was cheaper to pay Netlify than it was to manage our infrastructure in AWS. Coming back to Netlify after this time hasn’t changed my views. It’s still slick, well-documented, and intuitive.