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

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

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

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

npx @next/codemod <transform> <path>

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

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