Next.js Codemods

    Codemods are transformations that run on your codebase programmatically. This allows for a large amount of changes to be applied without having to manually go through every file.

    npx @next/codemod <transform> <path>

    • transform - name of transform, see available transforms below.
    • path - files or directory to transform
    • --dry Do a dry-run, no code will be edited
    • --print Prints the changed output for comparison

    Transforms anonymous components into named components to make sure they work with Fast Refresh.

    For example

    Transforms into:

    1. export default function MyComponent() {
    2.   return <div>Hello World</div>
    3. }

    Usage

    Go to your project

    1. cd path-to-your-project/

    Run the codemod:

    1. npx @next/codemod name-default-component

    Transforms the withAmp HOC into Next.js 9 page configuration.

    For example:

    1. // After
    2. export default function Home() {
    3.   return <h1>My AMP Page</h1>
    4. }
    6. export const config = {
    7.   amp: true,
    8. }

    Usage

    Go to your project

      1. npx @next/codemod withamp-to-config

      Transforms the deprecated automatically injected url property on top level pages to using withRouter and the property it injects. Read more here:

      For example:

      1. // To
      2. import React from 'react'
      3. import { withRouter } from 'next/router'
      4. export default withRouter(
      5.   class extends React.Component {
      6.     render() {
      7.       const { pathname } = this.props.router
      8.       return <div>Current pathname: {pathname}</div>
      9.     }
      10.   }
      11. )

      This is just one case. All the cases that are transformed (and tested) can be found in the __testfixtures__ directory.

      Usage

      Go to your project

      1. cd path-to-your-project/

      Run the codemod: