تفاصيل هذه المقالة عملية إنشاء ملحق Chrome باستخدام Next.js ، مع التركيز على الاستفادة من رد الفعل من أجل المنبثقة وتحقيق تنظيم الكود الفعال. يشارك المؤلف تجربته في إعادة كتابة مشروع موضوع Twitter كملحق next.js ، مع تسليط الضوء على مزايا بنية next.js على بدائل مثل إنشاء تطبيق React.

المنفعة الرئيسية المذكورة هي تنظيم الكود المحسّن ، مما يقلل من الغلاية. في حين أن ميزات Next.js مثل تصدير HTML الثابت ، والتحويلات المسبقة ، والتوجيه مفيد ، كان الدافع الأساسي هو رمز أنظف.

يحدد المؤلف بنية مجلد عملي:

? extension
  ? manifest.json
? next-app
  ? pages
  ? public
  ? styles
  ? package.json
README.md

جانب حاسم هو البرنامج النصي المخصص للبناء. يحتاج المعيار للتصدير التالي إلى تعديل للتعامل مع تفاصيل تمديد الكروم. يقوم البرنامج النصي بتصدير تطبيق Next.js إلى دليل الامتداد ، ويعيد تسمية الملفات (إزالة السدود الرائدة) ، ويدير الأصول من المجلد العام . يتم توفير البرنامج النصي النهائي ، الشامل ، بما في ذلك معالجة الأصول ،.

{ "الاسم": "Next Chrome" ، "الوصف": "Next.js Chrome Extension Starter" ، "الإصدار": "0.0.1" ، "manesest_version": 3 ، "فعل": { "default_title": "default_popup": "index.html" } } تتم الإشارة إلى قيود مهمة: ميزات Side-Side Next.js (على سبيل المثال ، التالي/الصورة

{
  "name": "Next Chrome",
  "description": "Next.js Chrome Extension starter",
  "version": "0.0.1",
  "manifest_version": 3,
  "action": {
    "default_title": "Next.js app",
    "default_popup": "index.html"
  }
}

تشغيل npm build (أو yarn build

chrome: // extensions ) ، وتمكين وضع المطور. في الختام ، توفر المقالة دليلًا عمليًا للمطورين الذين يسعون إلى الاستفادة من نقاط القوة الخاصة بـ Next.js لبناء امتدادات الكروم ، مما يوفر عملية تطوير مبسطة وتنظيم رمز محسّن. ويؤكد على أهمية عملية البناء المخصصة وتسلط الضوء على المزالق المحتملة لتجنب.