Updating Next.js to v13

Introduction

This blog has been using Next.js v12 for a while. Since its v13 of the page directory has been stable in production, I decided to update.
Not only I updated Next.js to v13, but I also fixed errors from other libraries. This is why I want to take a note about that.

Pull Request

This PR commits this update.

Updated Libraries

next
- 12.0.10
+ 13.2.4

react
- 17.0.2
+ 18.2.0

react-dom
- 17.0.2
+ 18.2.0

mdx-bundler
- 8.0.1
+ 9.2.1

next-pwa
- 5.4.4
+ 5.6.0

eslint-config-next
- 12.0.10
+ 13.2.4

What I did

Remove anchor element which a child of the Link component

Since Next.js v13 changes the APIs of the Link component, the Link no longer needs an anchor element for a child.

Warning: passHref is missing. See: https://nextjs.org/docs/messages/link-passhref @next/next/link-passhref

If you use v12 of eslint-config-next, ESLint shows you the above warning unless you update it to v13

Updating mdx-bundler to latest

Error: Package subpath './jsx-runtime.js' is not defined by "exports" in /path/to/repo/node_modules/react/package.json

When I updated next to v13 and executed next dev, dynamic pages show the above error. I guessed this error is from esbuild because I often saw the file jsx-runtime.js in projects using esbuild as the build output. mdx-bundler is only the package using esbuild in this blog. So I just updated it to latest, then it fixed the error.

I think mdx-bundler fixed this at v8.1.0 which supports react v18.

Other Topics

Why not appDir?

Although I love using the appDir approach, the reason I didn't use in this blog is that I couldn't find a way I make MDX using react hooks shown on the client side. I think I could do it with a combo of useEffect and useState, but it seems its implementation makes UX worse.

I also tried an approach that I pass the MDX content, which is serialized from a library such as next-mdx-remote, from the server component to the client component. Because of the serialization issue, I couldn't do that.

If I find a good solution for the MDX content, I'll make this blog move to appDir!

Why not Astro?

I've heard Astro is way too good for a static site. It often is compared to Next.js because they have similar features.
The reason I stick with Next.js is the user experience of the page navigation.
When a page moves to another page, users need to wait for the moment. Because of prerendering, Next.js doesn't make it happen.
So I didn't move to Astro this time.