منشئ ترخيص Next.js NPM

إنشاء التراخيص من package.json الخاص بك

يعد إنشاء ملف JSON من التبعيات المدرجة في ملف الحزمة أمرًا بسيطًا حقًا. أنا أستخدم مكتبة تسمى تقرير الترخيص ، والتي تقلل هذه المهمة إلى استدعاء أمر واحد. لا بد لي فقط من تثبيت الحزمة باعتبارها تبعية تطوير لمشروعي وإضافة البرنامج النصي التالي NPM.

{
  "dep:gen": "license-report --only=prod --output=json > licenses.json"
}

مع كل إصدار من Next.js

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

{
  "build": "npm run dep:gen && npx next build",
}

تطبيق عملي

أخيرًا ، أنا ببساطة أستهلك json في صفحة Next.js الخاصة بي وأمررها كخاصية إلى طريقة العرض الخاصة بي. لاحظ أن الصفحة نفسها ثابتة تمامًا. يتم استخدام مثال الكود التالي تمامًا مثل هذا في تطبيق الويب التدريجي هذا. كانت متوفرة على صفحة الترخيص.

import React from "react";
import { NpmDependency } from "../../models/license/model.license";
import RiExternalLink from "remixicon-react/ExternalLinkLineIcon";

type Props = {
  licenses: NpmDependency[];
};

export function Licenses(props: Props) {
  const { licenses } = props;

  return (
    <>
      <div className="flex flex-col items-center mb-10 space-y-2 mt-28">
        <h1 className="text-5xl">Licenses</h1>
        <h2 className="text-xl">All licenses used for flaming.codes</h2>
      </div>
      <div className="grid max-w-3xl grid-cols-12 gap-10 mx-auto">
        {licenses.map((l) => (
          <a
            key={l.link}
            className="flex-col space-y-1 overflow-hidden col-span-full group"
            href={l.link.replace("git+", "").replace("ssh://", "")}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={`Open Github repo for ${l.name}`}>
            <div className="inline-flex items-end">
              <div className="space-x-2 duration-300 ease-in group-hover:translate-x-6 group-hover:opacity-0">
                <span className="text-2xl">{l.name}</span>
                <span className="opacity-50">{l.installedVersion}</span>
              </div>

              <div className="absolute mb-1 text-blue-600 duration-300 ease-in -translate-x-4 opacity-0 group-hover:translate-x-0 group-hover:opacity-100">
                <RiExternalLink />
              </div>
            </div>

            <div className="text-gray-400">
              {[l.licenseType, l.author].filter(Boolean).join(", ")}
            </div>
          </a>
        ))}
      </div>
    </>
  );
}