# Automating Next.js Code Changes with Codemods

### **Introduction :**

Codemods are transformations that run on your codebase programmatically. This allows for a large number of changes to be applied without having to manually go through every file. Next.js provides codemod transformations to help upgrade your Next.js codebase when an API is updated or deprecated.

### Here is an example of how a codemod works:

Let's say that the Next.js team deprecates the `next/image` component and introduces a new `next/image-experimental` component. You can use the `next-image-to-legacy-image` codemod to automatically migrate your codebase to use the new component.

The codemod will first scan your codebase for all imports of the `next/image` component. Then, it will replace each import with the `next/image-experimental` component. Finally, it will save the changes to your files.

Codemods are a great way to save time and effort when upgrading your Next.js codebase. They can also help you avoid making mistakes.

### Here are some of the benefits of using Next.js codemods:

* **Save time and effort:** Codemods can automate the process of upgrading your codebase, which can save you a lot of time and effort.
    
* **Avoid mistakes:** Codemods can help you avoid making mistakes when upgrading your codebase. This is because codemods are programmatically applied, which means that there is less chance of human error.
    
* **Stay up-to-date:** Codemods can help you stay up-to-date with the latest Next.js features. This is because codemods can be used to apply changes to your codebase when new features are released.
    

If you are looking for a way to save time and effort when upgrading your Next.js codebase, then codemods are a great option. They can also help you avoid making mistakes and stay up-to-date with the latest Next.js features.

### Most commonly used Next.js codemods:

* `next-image-to-legacy-image`**:** This codemod renames imports of the `next/image` component to the deprecated `next-image` component.
    
* `next-image-experimental`**:** This codemod migrates your codebase to use the new `next/image` component.
    
* `new-link`**:** This codemod removes the `<a>` tags from `Link` components and replaces them with the `href` prop.
    
* `cra-to-next`**:** This codemod migrates your codebase from Create React App to Next.js.
    
* `add-missing-react-import`**:** This codemod adds `import React from 'react'` to files that do not already have it.
    
* `name-default-component`**:** This codemod transforms anonymous components into named components.
    
* `withamp-to-config`**:** This codemod transforms the `withAMP` HOC into a page config.
    
* `url-to-withrouter`**:** This codemod replaces uses of the `url` prop with the `withRouter` component.
    

To use a codemod, you can run the following command in your terminal:

`npx @next/codemode <transform> <path>`

Eg) `npx @next/codemod next-image-to-legacy-image ./`  
This would run the codemod on all files in the current directory.

You can also use the `--dry` flag to run the codemod in a dry run mode, which will print the changes that would be made without actually making any changes to your code.

The `--print` flag can be used to print the changed output for comparison.

Safely renames `next/image` imports in existing Next.js 10, 11, or 12 applications to `next/legacy/image` in Next.js 13. Also renames `next/future/image` to `next/image`.

`pages/index.js`

```javascript
import Image1 from 'next/image'
import Image2 from 'next/future/image'
 
export default function Home() {
  return (
    <div>
      <Image1 src="/demo1.jpg" width="300" height="400" />
      <Image2 src="/demo1.png" width="600" height="500" />
    </div>
  )
}
```

`pages/index.js`

```javascript
// 'next/image' becomes 'next/legacy/image'
import Image1 from 'next/legacy/image'
// 'next/future/image' becomes 'next/image'
import Image2 from 'next/image'
 
export default function Home() {
  return (
    <div>
      <Image1 src="/demo1.jpg" width="300" height="400" />
      <Image2 src="/demo1.png" width="600" height="500" />
    </div>
  )
}
```

## **Conclusion**

Codemods are a powerful tool that can help you upgrade your Next.js codebase. If you are looking for a way to save time and effort, then codemods are a great option.

I hope this article has helped you understand Next.js codemods. If you have any further questions, please feel free to ask me.

Follow @[Sanket Jagdale](@Devgrammer) for more !!

My LinkTree : [https://linktr.ee/Devgrammer](https://linktr.ee/Devgrammer)