Upgrading Next.js to version 13 (from 12)
Upgrading from Next 12 to 13
Ref: https://nextjs.org/docs/pages/building-your-application/upgrading/version-13
Let's see how easy this is!
Install New Version
npm i next@latest react@latest react-dom@latest eslint-config-next@latest
This does not work! It's currently running react 17.0.2 and doing the install like this doesn't work. As soon as next tries to install the latest, it sees old react and fails. Error recommends adding --legacy-peer-deps which I've done before. I suppose that's the best solution when you know what you are doing. In this case, I know next and react are conflicting but if they are both upgraded, they won't conflict. Yes?
Also, updated remark and remark-html to latest.
Version Compare
Oh my, remark does not natively support tables. I didn't realize they were non-standard as I've been using them so much. I'm trying the least effort solution of using remark-gfm that I found in a post. That worked just fine. I added a tiny bit of CSS so it wasn't all scrunched together.
| Package | v12 | latest |
|---|---|---|
| next | ^12.1.0 | ^13.4.12 |
| react | ^17.0.2 | ^18.2.0 |
| react-dom | ^17.0.2 | ^18.2.0 |
| remark | ^13.0.0 | ^14.0.3 |
| remark-html | ^13.0.2 | ^15.0.2 |
| eslint-config-next | NA | ^13.4.12 |
Does it just Work?
No! But that's okay, I wasn't done reading.
Error 1: Invalid Link Component with a Component
Pre version 13, you had to nest an anchor tag, <a>, when you used the Link component, <Link>. That is no longer required or supported. There is a codemod for this
npx @next/codemod@latest new-link .
This worked great except it did not respect my Prettier settings. I just went to each file and saved it as there were only three files touched. And only two actually had the Link in it. Strange that.
After this, the site is back up and running. That was easy!
Error 2: TypeError Related to remark When Clicking on Posts
I click on any existing post and get: TypeError: (0 , remark__WEBPACK_IMPORTED_MODULE_3__.default) is not a function
The key bit here is default. As the new version of remark does not export a default, the import has to change to use a named import.
import { remark } from 'remark'
Updates
Image Component
The original tutorial (Next.js 11?) used a standard <img> element. The newer tutorials use the <Image> component. That was an easy replacement. As I was not using it previously, there was no reason to look at the codemod regarding that.
App Directory
Migrating from pages to app This does look interesting and it is a place where things I understand (or think I do) are being replaced.
- Data fetching functions like
getServerSidePropsandgetStaticPropshave been replaced with a new API insideapp.getStaticPathshas been replaced withgenerateStaticParams.
_documentfile which I have not used yet. But that and_appshould migrate toapp/layout.tsx. Luckily, they can all coexist as long as there are pages.<Head>component is migrating to use built-in SEO support