عرض مصدر Next.js/codemods

<noinclude>{{DISPLAYTITLE:تحويلات Codemods في Next.js}}</noinclude>
تقدم Next.js تحويلات Codemod تساعد على ترقية ملفات شيفرة تطبيق Next.js لتعديل ميزة توقف دعمها. وتُنفّذ هذه التحويلات ضمن ملفات الشيفرة برمجيًا مما يسمح بتطبيق كمية كبيرة من التغييرات دون الحاجة إلى تعديلها يدويًا.

== استخدام Codemods في Next.js ==
نفّذ الأمر التالي:<syntaxhighlight lang="bash">
npx @next/codemod <transform> <path>
</syntaxhighlight>

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

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

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

تحوَّل الشيفرة مثلًا:<syntaxhighlight lang="javascript">
export default function Page() {
  return (
    <Link href="/about">
      <a>About Us</a>
    </Link>
  )
}
</syntaxhighlight>إلى:<syntaxhighlight lang="javascript">
export default function Page() {
  return <Link href="/about">About Us</Link>
}
</syntaxhighlight>

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

تحوَّل الشيفرة مثلًا:<syntaxhighlight lang="javascript">
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>
  )
}
</syntaxhighlight>إلى:<syntaxhighlight lang="javascript">
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>
  )
}
</syntaxhighlight>

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

انتبه رجاءً إلى أن هذا التحويل تجريبي ويغطي حاليًا الاستخدام الثابت مثل:<syntaxhighlight lang="javascript">
<Image src={img} layout="responsive" />
</syntaxhighlight>ولا يشمل حالات الاستخدام المتغيرة مثل:<syntaxhighlight lang="javascript">
<Image {...props} />
</syntaxhighlight>أضف إلى ذلك أنه يعمل على:

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

تحوَّل الشيفرة مثلًا:<syntaxhighlight lang="javascript">
import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} />
}
</syntaxhighlight>إلى:<syntaxhighlight lang="javascript">
import Image from 'next/image'
import img from '../img.png'

const css = { maxWidth: '100%', height: 'auto' }
function Page() {
  return <Image src={img} style={css} />
}
</syntaxhighlight>تحوَّل الشيفرة التي تستعمل التخطيط responsive:<syntaxhighlight lang="javascript">
import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} layout="responsive" />
}
</syntaxhighlight>إلى:<syntaxhighlight lang="javascript">
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} />
}
</syntaxhighlight>تحوَّل الشيفرة التي تستعمل التخطيط fill:<syntaxhighlight lang="javascript">
import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} layout="fill" />
}
</syntaxhighlight>إلى:<syntaxhighlight lang="javascript">
import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} sizes="100vw" fill />
}
</syntaxhighlight>تحوَّل الشيفرة التي تستعمل التخطيط fixed:<syntaxhighlight lang="javascript">
import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} layout="fixed" />
}
</syntaxhighlight>إلى:<syntaxhighlight lang="javascript">
import Image from 'next/image'
import img from '../img.png'

function Page() {
  return <Image src={img} />
}
</syntaxhighlight>
== التحويلات في النسخة 11 من Next.js ==

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

== التحويلات في النسخة 10من Next.js ==
إليك أهم التحويلات المستخدمة:

=== التحويل <code>add-missing-react-import</code> ===
يحوّل الملفات التي لا تُدرج المكتبة <code>React</code> كي تدرجها وذلك حتى يعمل [https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html تحويل JSK الجديد] في React. 

تحوَّل الشيفرة التالية مثلًا:<syntaxhighlight lang="javascript">
// my-component.js
export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}
</syntaxhighlight>إلى: <syntaxhighlight lang="javascript">
// my-component.js
import React from 'react'
export default class Home extends React.Component {
  render() {
    return <div>Hello World</div>
  }
}
</syntaxhighlight>

== التحويلات في النسخة 9 من Next.js ==
إليك أهم التحويلات المستخدمة:

=== التحويل <code>name-default-component</code> ===
يحوّل المكوّنات غير المسماة anonymous components إلى مسماة لكي يضمن عملها مع [[Next.js/fast refresh|التحديث السريع في Next.js]]. 

تحوَّل الشيفرة التالية:<syntaxhighlight lang="javascript">
// my-component.js
export default function () {
  return <div>Hello World</div>
}
</syntaxhighlight>إلى:<syntaxhighlight lang="javascript">
// my-component.js
export default function MyComponent() {
  return <div>Hello World</div>
}
</syntaxhighlight>يُكتب اسم المكوّن بأسلوب سنام الجمل camel case بناءً على اسم الملف، كما يعمل أيضًا مع الدالة السهمية:

==== استخدام التحويل ====
انتقل إلى مشروعك:<syntaxhighlight lang="bash">
cd path-to-your-project/
</syntaxhighlight>شغّل تحويل codemod:<syntaxhighlight lang="bash">
npx @next/codemod name-default-component
</syntaxhighlight>

=== التحويل <code>withamp-to-config</code>===
يحوّل مكوّن المستوى الأعلى <code>withAmp</code> إلى كائن تهيئة صفحة في Next.js (النسخة 9).

إليك مثالًا:<syntaxhighlight lang="javascript">
// قبل
import { withAmp } from 'next/amp'

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

export default withAmp(Home)
</syntaxhighlight><syntaxhighlight lang="javascript">
// بعد
export default function Home() {
  return <h1>My AMP Page</h1>
}

export const config = {
  amp: true,
}
</syntaxhighlight>

=== استخدام التحويل ===
انتقل إلى مشروعك:<syntaxhighlight lang="bash">
cd path-to-your-project/
</syntaxhighlight>نفِّذ التحويل:<syntaxhighlight lang="bash">
npx @next/codemod withamp-to-config
</syntaxhighlight>

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

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

إليك مثالًا:<syntaxhighlight lang="javascript">
// من
import React from 'react'
export default class extends React.Component {
  render() {
    const { pathname } = this.props.url
    return <div>Current pathname: {pathname}</div>
  }
}
</syntaxhighlight><syntaxhighlight lang="javascript">
// إلى
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>
    }
  }
)
</syntaxhighlight>هذه إحدى الحالات، وللاطلاع على بقية الحالات التي جرى تحويل الشيفرة فيها (واختُبرت) راجع المجلد <code>[https://github.com/vercel/next.js/tree/canary/packages/next-codemod/transforms/__testfixtures__/url-to-withrouter __testfixtures__]</code> على GitHub.

==== استخدام التحويل ====
انتقل إلى مشروعك:<syntaxhighlight lang="bash">
cd path-to-your-project/
</syntaxhighlight>نفِّذ التحويل:<syntaxhighlight lang="bash">
npx @next/codemod url-to-withrouter
</syntaxhighlight>

== المصادر ==

* الصفحة [https://nextjs.org/docs/advanced-features/codemods Next.js Codmods] من توثيق Next.js الرسمي.
[[تصنيف:Next.js|{{SUBPAGENAME}}]]
[[تصنيف:Next.js Advanced Features|{{SUBPAGENAME}}]]