Codemods

Los codemods son transformaciones que se ejecutan programáticamente en su base de código. Esto permite aplicar una gran cantidad de cambios de manera automatizada sin tener que revisar manualmente cada archivo.

Next.js proporciona transformaciones de Codemod para ayudar a actualizar su base de código de Next.js cuando una API se actualiza o se deprecia.

Uso

En su terminal, navegue (cd) hasta la carpeta de su proyecto y ejecute:

Terminal

npx @next/codemod <transform> <path>

Reemplazando <transform> y <path> con los valores apropiados.

transform - nombre de la transformación
path - archivos o directorio a transformar
--dry Ejecuta una prueba sin modificar el código
--print Muestra los cambios para comparación

Codemods de Next.js

13.2

Usar fuente integrada

`built-in-next-font`

Terminal

npx @next/codemod@latest built-in-next-font .

Este codemod desinstala el paquete @next/font y transforma las importaciones de @next/font en la fuente integrada next/font.

Por ejemplo:

import { Inter } from '@next/font/google'

Se transforma en:

import { Inter } from 'next/font/google'

13.0

Renombrar importaciones de Next Image

`next-image-to-legacy-image`

Terminal

npx @next/codemod@latest next-image-to-legacy-image .

Renombra de forma segura las importaciones de next/image en aplicaciones existentes de Next.js 10, 11 o 12 a next/legacy/image en Next.js 13. También renombra next/future/image a next/image.

Por ejemplo:

pages/index.js

import Image1 from 'next/image'
import Image2 from 'next/future/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

Se transforma en:

pages/index.js

// 'next/image' se convierte en 'next/legacy/image'
import Image1 from 'next/legacy/image'
// 'next/future/image' se convierte en 'next/image'
import Image2 from 'next/image'

export default function Home() {
  return (
    <div>
      <Image1 src="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

Migrar al nuevo componente Image

`next-image-experimental`

Terminal

npx @next/codemod@latest next-image-experimental .

Migra de forma arriesgada de next/legacy/image al nuevo next/image añadiendo estilos en línea y eliminando props no utilizados.

Elimina el prop layout y añade style.
Elimina el prop objectFit y añade style.
Elimina el prop objectPosition y añade style.
Elimina el prop lazyBoundary.
Elimina el prop lazyRoot.

Eliminar etiquetas `<a>` de componentes Link

`new-link`

Terminal

npx @next/codemod@latest new-link .

Elimina las etiquetas <a> dentro de componentes Link, o añade un prop legacyBehavior a los Links que no pueden ser corregidos automáticamente.

Por ejemplo:

<Link href="/about">
  <a>About</a>
</Link>
// se transforma en
<Link href="/about">
  About
</Link>

<Link href="/about">
  <a onClick={() => console.log('clicked')}>About</a>
</Link>
// se transforma en
<Link href="/about" onClick={() => console.log('clicked')}>
  About
</Link>

En casos donde no se puede aplicar la corrección automática, se añade el prop legacyBehavior. Esto permite que su aplicación siga funcionando con el comportamiento antiguo para ese enlace en particular.

const Component = () => <a>About</a>

<Link href="/about">
  <Component />
</Link>
// se convierte en
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11

Migrar desde CRA

`cra-to-next`

Terminal

npx @next/codemod cra-to-next

Migra un proyecto de Create React App a Next.js; creando un Pages Router y la configuración necesaria para igualar el comportamiento. Inicialmente se utiliza renderizado solo del lado del cliente para evitar romper la compatibilidad debido al uso de window durante SSR, y puede habilitarse gradualmente para permitir la adopción de características específicas de Next.js.

Comparta cualquier comentario relacionado con esta transformación en esta discusión.

10

Añadir importaciones de React

`add-missing-react-import`

Terminal

npx @next/codemod add-missing-react-import

Transforma archivos que no importan React para incluir la importación y así funcionar con el nuevo transformador de JSX de React.

Por ejemplo:

my-component.js

export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

Se transforma en:

my-component.js

import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}

9

Transformar componentes anónimos en componentes con nombre

`name-default-component`

Terminal

npx @next/codemod name-default-component

Versiones 9 y superiores.

Transforma componentes anónimos en componentes con nombre para asegurar que funcionen con Fast Refresh.

Por ejemplo:

my-component.js

export default function () {
  return <div>Hello World</div>
}

Se transforma en:

my-component.js

export default function MyComponent() {
  return <div>Hello World</div>
}

El componente tendrá un nombre en camelCase basado en el nombre del archivo, y también funciona con funciones flecha.

8

Transformar HOC AMP en configuración de página

`withamp-to-config`

Terminal

npx @next/codemod withamp-to-config

Transforma el HOC withAmp en la configuración de página de Next.js 9.

Por ejemplo:

// Antes
import { withAmp } from 'next/amp'

function Home() {
  return <h1>My AMP Page</h1>
}

export default withAmp(Home)

// Después
export default function Home() {
  return <h1>My AMP Page</h1>
}

export const config = {
  amp: true,
}

6

Usar `withRouter`

`url-to-withrouter`

Terminal

npx @next/codemod url-to-withrouter

Transforma la propiedad url inyectada automáticamente (y ahora obsoleta) en páginas de nivel superior para usar withRouter y la propiedad router que este inyecta. Más información aquí: https://nextjs.org/docs/messages/url-deprecated

Por ejemplo:

Desde

import React from 'react'
export default class extends React.Component {
  render() {
    const { pathname } = this.props.url
    return <div>Current pathname: {pathname}</div>
  }
}

Hacia

import React from 'react'
import { withRouter } from 'next/router'
export default withRouter(
  class extends React.Component {
    render() {
      const { pathname } = this.props.router
      return <div>Current pathname: {pathname}</div>
    }
  }
)

Este es un caso. Todos los casos que se transforman (y que están probados) se pueden encontrar en el directorio __testfixtures__.

On this page