Кодемоды

Кодемоды — это преобразования, которые применяются к вашему кодовому основанию программно. Это позволяет программно применить большое количество изменений, не проходя вручную через каждый файл.

Next.js предоставляет преобразования кодемодов, чтобы помочь обновить ваше кодовое основание Next.js при обновлении или устаревании API.

Использование

В вашей консоли перейдите (cd) в папку проекта, затем выполните:

npx @next/codemod <transform> <path>

Заменив <transform> и <path> соответствующими значениями.

• transform — имя преобразования
• path — файлы или директория для преобразования
• --dry выполнить пробный запуск, код не будет изменён
• --print выводит изменённый результат для сравнения

Преобразования Next.js

14.0

Миграция импортов ImageResponse

next-og-import

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

Этот кодекод перемещает импорты из next/server в next/og для использования Динамического генерации изображений OG.

Например:

import { ImageResponse } from 'next/server'

Преобразуется в:

import { ImageResponse } from 'next/og'

Использование экспорта viewport

metadata-to-viewport-export

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

Этот кодекод мигрирует определённые данные метаданных viewport в экспорт viewport.

Например:

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

Преобразуется в:

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

13.2

Использование встроенного шрифта

built-in-next-font

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

Этот кодекод удаляет пакет @next/font и преобразует импорты @next/font во встроенный next/font.

Например:

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

Преобразуется в:

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

13.0

Переименование импортов Next Image

next-image-to-legacy-image

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

Безопасно переименовывает импорты next/image в существующих приложениях Next.js 10, 11 или 12 на next/legacy/image в Next.js 13. Также переименовывает next/future/image в next/image.

Например:

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>
  )
}

Преобразуется в:

// '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="/test.jpg" width="200" height="300" />
      <Image2 src="/test.png" width="500" height="400" />
    </div>
  )
}

Миграция к новому компоненту изображения

next-image-experimental

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

Опасно мигрирует из next/legacy/image в новый next/image, добавив inline стили и удалив неиспользуемые свойства.

• Удаляет свойство layout и добавляет style.
• Удаляет свойство objectFit и добавляет style.
• Удаляет свойство objectPosition и добавляет style.
• Удаляет свойство lazyBoundary.
• Удаляет свойство lazyRoot.

Удаление тегов <a> из компонентов Link

new-link

npx @next/codemod@latest new-link .

Удалить теги <a> внутри компонентов Link, или добавить свойство legacyBehavior к ссылкам, которые нельзя автоматически исправить.

Например:

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

В случаях, когда автоматическая корректировка не может быть применена, добавляется свойство legacyBehavior. Это позволяет вашему приложению продолжать работу, используя старое поведение для этой конкретной ссылки.

const Component = () => <a>About</a>
 
<Link href="/about">
  <Component />
</Link>
// becomes
<Link href="/about" legacyBehavior>
  <Component />
</Link>

11

Миграция с CRA

cra-to-next

npx @next/codemod cra-to-next

Мигрирует проект Create React App в Next.js; создаёт маршрутизатор Pages и необходимую конфигурацию для соответствия поведению. Первоначально используется только рендеринг на стороне клиента, чтобы предотвратить разрыв совместимости из-за использования window во время SSR и может быть плавно включён для постепенного внедрения функций, специфичных для Next.js.

Пожалуйста, поделитесь любыми отзывами, касающимися этого преобразования, в этой дискуссии.

10

Добавление импортов React

add-missing-react-import

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

Преобразует файлы, которые не импортируют React, чтобы включить импорт, для работы новой трансформации JSX React.

Например:

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

Преобразуется в:

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

9

Преобразование безымянных компонентов в именованные компоненты

name-default-component

npx @next/codemod name-default-component

Версии 9 и выше.

Преобразует безымянные компоненты в именованные, чтобы они работали с Fast Refresh.

Например:

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

Преобразуется в:

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

Компонент получит именованное имя в формате camelCase, основываясь на имени файла, и также работает со стрелочными функциями.

8

Преобразование AMP HOC в конфигурацию страницы

withamp-to-config

npx @next/codemod withamp-to-config

Преобразует HOC withAmp в конфигурацию страницы Next.js 9.

Например:

// Before
import { withAmp } from 'next/amp'
 
function Home() {
  return <h1>My AMP Page</h1>
}
 
export default withAmp(Home)

// After
export default function Home() {
  return <h1>My AMP Page</h1>
}
 
export const config = {
  amp: true,
}

6

Использование withRouter

url-to-withrouter

npx @next/codemod url-to-withrouter

Преобразует устаревшее автоматически инжектируемое свойство url на уровне страниц в использование withRouter и свойство router, которое оно инжектирует. Подробнее здесь: https://nextjs.org/docs/messages/url-deprecated

Например:

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>
    }
  }
)

Это один из случаев. Все случаи, которые преобразуются (и протестированы), можно найти в __testfixtures__ директории.