Générateur de licence Next.js NPM

Générer des licences à partir de votre package.json

La création d'un fichier JSON à partir de vos dépendances répertoriées dans le fichier de package est très simple. J'utilise une bibliothèque appelée license-report, qui réduit cette tâche à un seul appel de commande. Je dois juste installer le package en tant que dépendance de développement pour mon projet et ajouter le script NPM suivant.

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

Avec chaque build Next.js

Comme il s'agit d'une tâche répétitive qui doit être effectuée avant chaque déploiement pour assurer une sortie actuelle, je l'ai simplement ajoutée à la commande de construction de NPM. Cette commande est également utilisée par Next.js, ce qui signifie que chaque fois que vous déployez une nouvelle version (et créez donc une nouvelle version), les licences de vos dépendances sont générées avant la version réelle.

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

Une mise en œuvre pratique

Enfin, je consomme simplement le json dans ma page Next.js et le passe en tant que propriété à ma vue. Notez que la page elle-même est purement statique. L'exemple de code suivant est utilisé exactement comme celui-ci dans cette application Web progressive. Ils sont disponibles sur la page licence.

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