Next.jsNPMライセンスジェネレーター

package.jsonからライセンスを生成する

パッケージファイルにリストされている依存関係からJSONファイルを作成するのは本当に簡単です。私はlicense-reportというライブラリを使用しています。これにより、このタスクが1回のコマンド呼び出しになります。プロジェクトの開発依存関係としてパッケージをインストールし、次のNPMスクリプトを追加するだけです。

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

Next.jsビルドごとに

これは、現在の出力を確保するためにすべての展開の前に実行する必要がある反復的なタスクであるため、NPMのビルドコマンドに追加しただけです。このコマンドはNext.jsでも使用されます。つまり、新しいバージョンをデプロイする（したがって、新しいビルドを作成する）たびに、依存関係からのライセンスが実際のビルドの前に生成されます。

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

実用的な実装

最後に、Next.jsページでjsonを使用し、それをプロパティとしてビューに渡します。ページ自体は純粋に静的であることに注意してください。次のコード例は、このプログレッシブWebアプリでこのように使用されます。それらはライセンスページで入手できます。

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