It’s Blogvent, day 3, where I blog daily in December!

In case you missed it, there was a pretty bad security vulnerability recently with React Server Components.

Luckily, the team updated everything, hooray, so people can upgrade their repositories and everything should be okay!

That being said, when I went to update one of my long-neglected sites that used Next.js, I ran into a bunch of errors because some of the features I had used before had been deprecated.

But, I found that the Next.js team has a dedicated tool for Codemods! Codemods are transformations that run on your codebase programmatically, and their tool was able to fix all of the deprecations I was dealing with.

To run their tool, use:

npx @next/codemod <transform> <path>

You can just put . in for the path if you want it to be applied to your whole project.

There’s a list of transforms here, and at least in my case, it worked pretty well!

An example use-case of mine was that one of my sites was using Next.js 12, but in Next.js 13 and onwards, the <Link> component changed its syntax. So, I ran this:

npx @next/codemod@latest new-link .

And blammo, it worked like a charm!

More resources

Codemods aren’t just a Next.js thing. There’s a few registries and libraries out there that work similarly, and it’s really handy to have those commands available if you’re doing a common migration. Here’s some handy resources for you:

• Codemod Registry
• React Codemods
• Talk about codemods and upgrading systems from JSConf EU 2015
• Refactoring with Codemods to Automate API Changes

Hope this is helpful!