Closed5

Next.jsに導入するのがオススメのライブラリが集まるスクラップ

ヤマチューヤマチュー

目的

Next.jsは薄くてシンプルなフレームワークなため、少し踏み込んだことをしたいと思うと設定を1から自分で行わないといけない場合が多々あります
しかし、公式のexampleとかを見ているとPWAやSEOくらいの一般的な設定なら準公式みたいなライブラリが結構ある印象を受けます

そこで、このスクラップではNext.jsに導入するのが良さそうなライブラリをメモ書きで集めてみたいと思います

もし何か良いライブラリとかあれば、ぜひ投稿をお願いします!
特に記述ルールとかはありませんが、ライブラリのGitHubリンク等は貼っていただけると他の方が参照しやすいかと思います

ヤマチューヤマチュー

next-pwa

next-pwaはPWA対応を簡単に行えるライブラリです

良い点

使い方がわかりやすくインストールと最低限の設定を記述し、アイコン一式をジェネレーター等で作ってしまえば、すぐに使えます

また公式のFAQにて、PWA対応に対するアンサーのサンプルで使われているため安心感があります
https://nextjs.org/docs/faq

GitHubリポジトリ

https://github.com/shadowwalker/next-pwa

ヤマチューヤマチュー

next-seo

next-seoはSEO属性を簡単に付与できるライブラリです

良い点

デフォルトのSEOの設定ができたり、ページごとにカスタマイズができます
地味にnoindex、nofollowとかもコントロール出来る点は便利だと思いました
(個人的にはWordPressのプラグインみたいなライブラリだなぁと感じました)

また公式のexampleに実装があるので参考にできます
https://github.com/vercel/next.js/tree/canary/examples/with-next-seo

GitHubリポジトリ

https://github.com/garmeeh/next-seo

ヤマチューヤマチュー

next-sitemap

next-sitemapはsitemapを作成してくれるライブラリです

良い点

静的・事前レンダリング・動的・サーバーサイドのページに対してsitemapとrobots.txtを作ってくれます
コマンドを打つだけでsitemapを作ってくれるので便利です

一方、検索でよく出てくるnextjs-sitemap-generatorは、SSRで動かす前提なので少し制限がかかります
またREADMEにメンテナンスする時間が取れずメンテナーを探しているという趣旨が書かれているので、今後はnext-sitemapの方がメインになるかもしれません

GitHubリポジトリ

https://github.com/iamvishnusankar/next-sitemap

このスクラップは2022/08/29にクローズされました