Next.jsで開発するときにオススメのパッケージ

2024-06-06

普段 Next.js で開発する際によく導入するパッケージを書いていこうと思います。

@next/bundle-analyzer

build されたファイルのうち、何がどれくらいの割合を占めるのか出力してくれるパッケージです。

以前と比べ出力されたファイルの容量を意識することは減ったかもですが、サイズが小さいに越したことはないと思います。

Moment が主流の時代とかすごかったですよね。

Next.js 公式のサードパーティライブラリ対応パッケージです。

ザクッと調べた感じ、現状では以下に対応しているみたいです。

環境変数を型つきで扱えるようになるパッケージです。

環境変数ってデフォルトだと string | undefined として扱われるのがうっとおしいですよね。

プロジェクト内で使用されていないコンポーネントなどのファイルを洗い出すパッケージです。

自作で恐縮ですが…。

プロジェクト内で使用されていないパッケージを洗い出すパッケージです。

パッケージを 1 つ 1 つチェックするのって面倒なので、非常に助かります。

プロジェクトによっては挙動感が怪しかったりするんですが、そこは御愛嬌ですね。

sitemap を出力してくれるパッケージです。

ここでは sitemap のメリットは触れませんが、とりあえず入れて損はないと思います。

むしろデフォルトで出力してほしいくらいです。

Next.js へ依存しているパッケージ限定だと意外と少なかったですね、depcheck は依存すらしていないのでラインナップに入れるのはどうかとも思いますが。

そんな感じです。