تحويلات 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 الرسمي.