Codemods

Los codemods son transformaciones que se ejecutan en su base de código de manera programática. Esto permite aplicar una gran cantidad de cambios automáticamente 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) a la carpeta de su proyecto y ejecute:

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

14.0

Migrar importaciones de ImageResponse

next-og-import

npx @next/codemod@latest next-og-import .

Este codemod mueve las importaciones de next/server a next/og para usar la Generación dinámica de imágenes OG.

Por ejemplo:

import { ImageResponse } from 'next/server'

Se transforma en:

import { ImageResponse } from 'next/og'

Usar exportación viewport

metadata-to-viewport-export

npx @next/codemod@latest metadata-to-viewport-export .

Este codemod migra ciertos metadatos de viewport a la exportación viewport.

Por ejemplo:

export const metadata = {
  title: 'My App',
  themeColor: 'dark',
  viewport: {
    width: 1,
  },
}

Se transforma en:

export const metadata = {
  title: 'My App',
}

export const viewport = {
  width: 1,
  themeColor: 'dark',
}

13.2

Usar fuente integrada

built-in-next-font

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

Este codemod desinstala el paquete @next/font y transforma las importaciones de @next/font en la versión 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

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:

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:

// '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

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

Migra peligrosamente 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

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 se pueden corregir 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 específico.

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

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 problemas de compatibilidad debido al uso de window durante SSR, y puede habilitarse gradualmente para permitir la adopción de funciones 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

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 JSX de React.

Por ejemplo:

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

Se transforma en:

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

9

Transformar componentes anónimos en componentes nombrados

name-default-component

npx @next/codemod name-default-component

Versiones 9 y superiores.

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

Por ejemplo:

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

Se transforma en:

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

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

npx @next/codemod url-to-withrouter

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

Por ejemplo:

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

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 prueban) se pueden encontrar en el directorio __testfixtures__.