個人開発におすすめの Next.js 技術スタック

https://price-rank.dev/ja/qa/next_js/recommended-tech-stack-for-indie-development-in-nextjs

個人開発におすすめの Next.js 技術スタックの紹介です！
#Webなんでも勉強会

G's ACADEMY FUKUOKA (G's BASE Fukuoka)
2022/09/15

Transcript

1. 個人開発におすすめの Next.js 技術スタック morizyun
2. 自己紹介 Name morizyun (@zyunnosuke) Work 個人開発者 Skill Ruby / JavaScript / Golang ちょっとできます！ Place 8月に福岡市に来ました！
3. 制作物 中古品の価格コムを目指したサービスです。 月間100万PVくらいです。 (個別にお伝えさせてください) game-question.com ライターさんを雇うメディアを 効率的に運営できるサービス。
4. 話すこと 2016年から個人開発で試行錯誤し てきた「おすすめの技術スタッ ク」を紹介します！
5. 選定方針 アプリの開発に集中できる (インフラ管理が楽) 運用コストを安く抑えつつ、 開発効率を高める ストレスのないユーザー体験 (Web Vitals 大切)
6. フレームワーク + サーバ フレームワーク + サーバは 「Next.js + Vercel 」がオススメ。 ・Next.js：React のフレームワーク ・Vercel：Next.js 用ホスティング Next.js + Vercel なら Next.js の強 みを最大限活かせる
7. Next.js + Vercel は何がいいの？ SSG + ISRで、静的ファイルを Vercel CDN から返せば、ユーザー体験が良い。 SSG (デプロイ時にファイルを生成) ISR (更新があったファイルを後から生成) https://qiita.com/cheez921/items/245860c839f7e3a15a69
8. DB データの特性に応じて使い分けるのがお すすめ。 管理者が入力 Airtable / Newt リレーション を伴うデータ Supabase / Planet Scale + Prisma.js ID検索メイン Cloud Firestore
9. CSS＆UIフレームワーク ボタンなどの UI コンポーネントは できあいのものを使える場合 Chakra UI デザイン性が高く、UIコンポーネント の独自性が高い場合 Tailwind CSS
10. Next.js でのおすすめの実装方針 ・ SSG (+ISR)がユーザー体験良いので、できる限り使う ・ ユーザーごとにデータの出しわけが必要な場合はSSR ・ クライアントでデータ取得が必要なら認証とセットで設計 ・ React.Suspense はユーザー体験良くするのでぜひ！
11. おすすめライブラリ
12. NextAuth.js (認証) Next.js 向けの認証ライブラリ。 各種SNS認証をサポート
13. TanStack Query (旧 react-query) クライアントフェッチ用ライブラリ。 多機能で便利だがサイズ大きめ。
14. next-head-seo (SEO) zenn開発者のcatnoseさんが 作ってる軽量ライブラリ。
15. vercel/og-image (OGP画像) Vercelにデプロイしておくと HTMLを画像として出力
16. Thanks! G's BASE FUKUOKA Webなんでも勉強会#05