最近のフロントエンド開発でよく使うnpmパッケージ紹介
最近のプライベートにおける開発になるのですが、フロントエンド開発でよく使用している npm パッケージを紹介していこうと思います。
主に Dependencies を中心に、今回は Linter や Formatter など DevDependencies は含みません。
あくまで 2025 年 7 月現在のものなので、今後変わる可能性はあります、というか確実に変わりますのであしからず。
前提
以下の環境を前提とします。
- Next.js
- v15
- React
- v19
- CSS Modules
- TypeScript
- v5
npm パッケージ
- @bprogress/next
- @clerk/nextjs
- @serwist/next
- @t3-oss/env-nextjs
- next-intl
- next-themes
- nuqs
- use-show-window-size
- usehooks-ts
@bprogress/next
Next.js で画面遷移時のプログレスバーを実装するためのパッケージです。
Next.js はアップデートごとにかなりの仕様変更が入るので、画面遷移に伴うプログレスバーのパッケージは追いつくのがかなり大変そうな印象があります。
さまざまレガシーパッケージも存在しているのですが、おそらくこれが一番モダン、なはずです。
あと導入している URL や画面遷移に関わるパッケージとの兼ね合いに寄っては動かなくなることもあるっぽいです、nuqs とかかなり怪しい…。
まぁなくても困らないものなので、表示されたらラッキーくらいの気持ちでいるのが大切だと思います。
@clerk/nextjs
認証系の SaaS の一つである Clerk の Next.js 用パッケージです。
Clerk 自体はそこまでクセがなく、デフォルトで Dev と Prod で別れているのも良いですね。
SDK もとても使いやすく、@clerk/localizations を使うと多言語対応も簡単に行えて良い感じです。
ただスタイリングで使用されている単位が rem なので、そこだけ注意が必要です。
@serwist/next
Next.js で PWA 対応を行うためのパッケージです。
おそらく今一番メジャーな手法なのかな？という印象です。
多少導入にクセがありますが、公式サイト を見ながら入れたらそこまで詰まることもないと思います。
自作パッケージの use-pwa や iOS 向けの react-ios-pwa-prompt も合わせて導入すると良い感じです。
@t3-oss/env-nextjs
Next.js における環境変数を単なる定数として扱うことができるパッケージです。
zod とともに使うことで、型まで付与されるのが良い感じです。
正しく環境変数が設定されていない場合や、環境変数が型に沿っていない場合、build 時にエラーを吐いてくれるのが偉いです。
next-intl
Next.js で多言語対応を行えるパッケージです。
クセがなく、ベタな実装で問題なく動きます。
公式サイトの書きっぷりもとても丁寧で、なんと @clerk/nextjs との組み合わせ についても書かれています。
正直このドキュメントがなかったら実装しきれなかったと思います、神。
next-themes
Next.js でダークモードに対応するためのパッケージです。
これまたクセがなく、素直に実装できるのが良い感じです。
nuqs
クエリパラメーターを便利に扱うためのパッケージです。
結構クセ強で、意外と使いこなすのは難しい印象です。
とはいえ Next.js ではクエリパラメーターの扱いや型周りが弱めなので、クエリパラメーターを扱う際は必須です。
ページャーやソート、同ページ内検索やフィルターなどを導入する際には重宝します。
use-show-window-size
自作パッケージで恐縮ですが、画面の右上に常にウィンドウサイズを表示してくれるようになります。
最近の Chrome は右上に表示してくれますが、Firefox ユーザーなもんで…。
usehooks-ts
カスタム hooks の詰め合わせです。
こういったパッケージはいくつか種類がありますが、個人的には usehooks-ts がシンプルで良い感じかなーと思っています。
よく使うのは useBoolean、useLocalStorage、useWindowSize あたりです。
その他
他にも言及するほどではないけど、よく使うパッケージは以下のとおりです。
そんな感じです。
最近だととくに @clerk/nextjs × @serwist/next × @t3-oss/env-nextjs × next-intl × next-themes の組み合わせは自分の中でテッパンになりつつあります。
実装方法については OSS で公開していますので、よろしければ見ていただけますと。