Кодемоды

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

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, добавляя встроенные стили и удаляя неиспользуемые свойства.

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

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

new-link

npx @next/codemod@latest new-link .

Удалить теги <a> внутри компонентов ссылок или добавить свойство 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, чтобы включить импорт, чтобы новый преобразователь React JSX работал.

Например:

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

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

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__ директории.