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