はじめに
みなさん、こんにちは。Happiness Chainメンターのryoです。
転職のためにNext.jsで自作アプリを作ろうと考えている皆さん。
Next.jsの自作アプリを作るだけで高い評価を得られますが、どのライブラリを選ぶかも重要なポイントです。
今回は、Next.jsでのおすすめライブラリを機能別にご紹介します。
CSS関連のライブラリ: shadcn-ui
理由は以下の通りです。
-
パフォーマンスの向上
Next.jsはCSS-in-JSからの脱却を目指しています。
その理由としてCSS-in-JSがクライアントサイドで動的にスタイリングしており、事前にビルドされたCSSの方が効率的であるためです。
そのため、styled-componentsやmui、chakra-uiなどのCSS-in-JSのみ対応のライブラリは選択肢として除外されます。（MUIなどは、CSS-in-JS以外の方法をサポートする動きがあります）
-
Tailwind CSSの推奨
Next.jsはTailwind CSSを推奨しているため、Tailwind CSSをサポートするライブラリを選ぶのが良いです。
上記二つを考慮すると、nextuiやheadlessui等がありますが、GitHubのstar数や拡張性の高さで、shadcn-uiが特におすすめです。
フォーム関連のライブラリ
Server Actionを利用する場合: conform
Server Actionを利用しない場合: react-hook-form
どちらのライブラリも入力変更時のパフォーマンスを改善し、複雑なバリデーションを簡単に実装できます。フォームの実装にはぜひ導入してみてください。
バリデーションライブラリ: zod
「yupとzod、どちらが良いの？」という議論がありますが、機能的には大差ありません。
その上で、GitHubのスター数が多く、僕自身zodを使用している現場が多い印象ですので、zodがおすすめです。
グローバルステート管理のライブラリ
少ないstateの管理: useContext
多くのstateの管理: zustand
管理するstateが少ない場合はuseContextで十分ですが、多い場合は軽量なzustandが適しています。zustandはコード量を抑えながらグローバルステート管理ができ、スター数もReduxやRecoilよりも増加しています。
ORMライブラリ: Prisma
Next.jsでAPIを開発しない方にもおすすめのライブラリです。Prisma Clientを活用することで、既存のデータベースからデータを取得し、スキーマファイルを自動生成できます。また、zodやyupと組み合わせることで、各テーブルの型を自動生成できるため、シンプルなAPIからデータを取得する際に生成された型をそのまま使用することができます。
最後に
いかがだったでしょうか？
これらのライブラリを活用することで、モダンな企業の採用担当者の目に留まりやすくなります。
採用面接では、なぜそのライブラリを選んだのかを聞かれることもありますので、上記の理由をお答えできればバッチリです。ぜひ参考にしてみてください！