تحويلات Codemods في Next.js

تقدم Next.js تحويلات Codemod تساعد على ترقية ملفات شيفرة تطبيق Next.js لتعديل ميزة توقف دعمها. وتُنفّذ هذه التحويلات ضمن ملفات الشيفرة برمجيًا مما يسمح بتطبيق كمية كبيرة من التغييرات دون الحاجة إلى تعديلها يدويًا.

استخدام Codemods في Next.js

نفّذ الأمر التالي:

npx @next/codemod <transform> <path>

• transform: يمثل اسم التحويل.
• path: الملفات او المجلد الذي سيُحوَّل.
• dry--: لتشغيل التطبيق دون أي تغيير في الشيفرة.
• print--: طباعة الخرج الذي تغيّر لأغراض الموازنة.

التحويلات في النسخة 13 من Next.js

التحويل new-link

يحذف بأمان العنصر <a> من next/link أو يضيف الخاصية legacyBehavior.

تحوَّل الشيفرة مثلًا:

export default function Page() {
  return (
    <Link href="/about">
      <a>About Us</a>
    </Link>
  )
}

إلى:

export default function Page() {
  return <Link href="/about">About Us</Link>
}

التحويل next-image-to-legacy-image

يبدِّل هذا التحويل بأمان الاستيراد next/image في تطبيقات Next.js المبنية بإصدار 10 أو 11 أو 12 إلى الاستيراد next/legacy/image في تطبيق Next.js ذي الإصدار 13.

تحوَّل الشيفرة مثلًا:

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

إلى:

import Image1 from 'next/legacy/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 (تجريبي)

يجري هذا التحويل انتقالًا من المكون next/legacy/image إلى المكون next/image -ولكن العملية قد تكون خطرة وتسبب مشاكل فاحذر- وذلك عبر إضافة تنسيقات سطرية inline styles وحذف الخاصيات غير المستعملة.

انتبه رجاءً إلى أن هذا التحويل تجريبي ويغطي حاليًا الاستخدام الثابت مثل:

<Image src={img} layout="responsive" />

ولا يشمل حالات الاستخدام المتغيرة مثل:

<Image {...props} />

أضف إلى ذلك أنه يعمل على:

• حذف الخاصية layout وإضافة style
• حذف الخاصية objectFit وإضافة style
• حذف الخاصية objectPosition وإضافة style
• حذف الخاصية lazyBoundary
• حذف الخاصية lazyRoot
• تغيير loader من ملف الضبط next.config.js إلى مخصص "custome" وحذف path وضبط قيمة loaderFile إلى ملف جديد

تحوَّل الشيفرة مثلًا:

import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} />
}

إلى:

import Image from 'next/image'
import img from '../img.png'

const css = { maxWidth: '100%', height: 'auto' }
function Page() {
  return <Image src={img} style={css} />
}

تحوَّل الشيفرة التي تستعمل التخطيط responsive:

import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} layout="responsive" />
}

إلى:

import Image from 'next/image'
import img from '../img.png'

const css = { width: '100%', height: 'auto' }
function Page() {
  return <Image src={img} sizes="100vw" style={css} />
}

تحوَّل الشيفرة التي تستعمل التخطيط fill:

import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} layout="fill" />
}

إلى:

import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} sizes="100vw" fill />
}

تحوَّل الشيفرة التي تستعمل التخطيط fixed:

import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} layout="fixed" />
}

إلى:

import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} />
}

التحويلات في النسخة 11 من Next.js

التحويل cra-to-next (تجريبي)

ينقل هذا التحويل مشروع "Create React App" (تطبيق React) إلى تطبيق Next.js. إذ ينشئ المجلد pages وملف التهيئة "config" الضروري لمطابقة السلوك. كما يُعطّل مبدئيًا التصيير من جانب العميل فقط لمنع اختلال التوافق نظرًا لاحتمال استخدام التعليمة window أثناء التصيير من جانب الخادم (وهي غير موجودة عمليًا إلا في جانب العميل)، لكن يمكن تمكينه بسلاسة كي يسمح بالتكيف التدريجي مع الميزات الخاصة بتطبيق Next.js

التحويلات في النسخة 10من Next.js

إليك أهم التحويلات المستخدمة:

التحويل add-missing-react-import

يحوّل الملفات التي لا تُدرج المكتبة React كي تدرجها وذلك حتى يعمل تحويل JSK الجديد في React.

تحوَّل الشيفرة التالية مثلًا:

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

إلى:

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

التحويلات في النسخة 9 من Next.js

إليك أهم التحويلات المستخدمة:

التحويل name-default-component

يحوّل المكوّنات غير المسماة anonymous components إلى مسماة لكي يضمن عملها مع التحديث السريع في Next.js.

تحوَّل الشيفرة التالية:

// my-component.js
export default function () {
  return <div>Hello World</div>
}

إلى:

// my-component.js
export default function MyComponent() {
  return <div>Hello World</div>
}

يُكتب اسم المكوّن بأسلوب سنام الجمل camel case بناءً على اسم الملف، كما يعمل أيضًا مع الدالة السهمية:

استخدام التحويل

انتقل إلى مشروعك:

cd path-to-your-project/

شغّل تحويل codemod:

npx @next/codemod name-default-component

التحويل withamp-to-config

يحوّل مكوّن المستوى الأعلى withAmp إلى كائن تهيئة صفحة في Next.js (النسخة 9).

إليك مثالًا:

// قبل
import { withAmp } from 'next/amp'

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

export default withAmp(Home)

// بعد
export default function Home() {
  return <h1>My AMP Page</h1>
}

export const config = {
  amp: true,
}

استخدام التحويل

انتقل إلى مشروعك:

cd path-to-your-project/

نفِّذ التحويل:

npx @next/codemod withamp-to-config

التحويلات في النسخة 6 من Next.js

التحويل url-to-withrouter

يحوّل الخاصية url الملغية التي تُظهر تلقائيًا في صفحات المستوى الأعلى (صفحات المجلد pages) لكي تستخدم الخاصيتين withRouter و router بدلًا منها.

إليك مثالًا:

// من
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__ على GitHub.

استخدام التحويل

انتقل إلى مشروعك:

cd path-to-your-project/

نفِّذ التحويل:

npx @next/codemod url-to-withrouter

المصادر

• الصفحة Next.js Codmods من توثيق Next.js الرسمي.