Next.js NPM 라이선스 생성기

package.json에서 라이선스 생성

패키지 파일에 나열된 종속성에서 JSON 파일을 만드는 것은 정말 간단합니다. 저는 이 작업을 단일 명령 호출로 줄여주는 license-report라는 라이브러리를 사용하고 있습니다. 내 프로젝트에 대한 개발 종속성으로 패키지를 설치하고 다음 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을 사용하고 속성으로 내 뷰에 전달합니다. 페이지 자체는 순전히 정적입니다. 다음 코드 예제는 이 프로그레시브 웹 앱에서 정확히 이와 같이 사용됩니다. 라이선스 페이지에서 사용할 수 있습니다.

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