Next.js NPM lisans oluşturucu

package.json dosyanızdan lisans oluşturma

Paket dosyasında listelenen bağımlılıklarınızdan bir JSON dosyası oluşturmak gerçekten basittir. Bu görevi tek bir komut çağrısına indirgeyen lisans raporu adlı bir kitaplık kullanıyorum. Paketi projem için bir geliştirme bağımlılığı olarak kurmam gerekiyor ve aşağıdaki NPM betiğini ekledim.

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

Her Next.js derlemesiyle

Bu, geçerli bir çıktı sağlamak için her dağıtımdan önce yapılması gereken tekrarlayan bir görev olduğundan, onu NPM'nin inşa komutuna ekledim. Bu komut aynı zamanda Next.js tarafından da kullanılır; bu, yeni bir sürüm dağıttığınızda (ve dolayısıyla yeni bir yapı oluşturduğunuzda), bağımlılıklarınızdaki lisansların gerçek derlemeden önce oluşturulduğu anlamına gelir.

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

Pratik bir uygulama

Son olarak, Next.js sayfamdaki json'u tüketiyorum ve onu bir özellik olarak görüşüme aktarıyorum. Sayfanın kendisinin tamamen statik olduğunu unutmayın. Aşağıdaki kod örneği, bu aşamalı web uygulamasında tam olarak bu şekilde kullanılır. Bunlar lisans sayfasında mevcuttur.

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>
    </>
  );
}