個人開発におすすめの 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
   

   View Slide

2. 自己紹介 Name morizyun
   
   (@zyunnosuke)
   Work 個人開発者
   Skill Ruby / JavaScript / Golang
   
   ちょっとできます！
   Place 8月に福岡市に来ました！
   

   View Slide

3. 制作物
   中古品の価格コムを目指したサービスです。
   
   月間100万PVくらいです。
   
   (個別にお伝えさせてください)
   game-question.com
   ライターさんを雇うメディアを
   
   効率的に運営できるサービス。
   

   View Slide

4. 話すこと 2016年から個人開発で試行錯誤し
   てきた「おすすめの技術スタッ
   ク」を紹介します！
   

   View Slide

5. 選定方針 アプリの開発に集中できる
   
   (インフラ管理が楽)
   運用コストを安く抑えつつ、
   
   開発効率を高める
   ストレスのないユーザー体験
   
   (Web Vitals 大切)
   

   View Slide

6. フレームワーク
   
   + サーバ
   フレームワーク + サーバは
   「Next.js + Vercel 」がオススメ。
   ・Next.js：React のフレームワーク
   
   ・Vercel：Next.js 用ホスティング
   Next.js + Vercel なら Next.js の強
   みを最大限活かせる
   

   View Slide

7. Next.js + Vercel
   は何がいいの？ SSG + ISRで、静的ファイルを Vercel
   CDN から返せば、ユーザー体験が良い。
   SSG
   
   (デプロイ時にファイルを生成)
   ISR
   
   (更新があったファイルを後から生成)
   https://qiita.com/cheez921/items/245860c839f7e3a15a69
   

   View Slide

8. DB データの特性に応じて使い分けるのがお
   すすめ。
   管理者が入力 Airtable / Newt
   リレーション
   を伴うデータ
   Supabase / Planet
   Scale + Prisma.js
   ID検索メイン Cloud Firestore
   

   View Slide

9. CSS＆UIフレームワーク
   ボタンなどの UI コンポーネントは
   
   できあいのものを使える場合
   Chakra UI
   デザイン性が高く、UIコンポーネント
   の独自性が高い場合
   Tailwind CSS
   

   View Slide

10. Next.js でのおすすめの実装方針
    ・ SSG (+ISR)がユーザー体験良いので、できる限り使う
    ・ ユーザーごとにデータの出しわけが必要な場合はSSR
    ・ クライアントでデータ取得が必要なら認証とセットで設計
    ・ React.Suspense はユーザー体験良くするのでぜひ！
    

    View Slide

11. おすすめライブラリ
    

    View Slide

12. NextAuth.js
    
    (認証)
    Next.js 向けの認証ライブラリ。
    
    各種SNS認証をサポート
    

    View Slide

13. TanStack Query
    
    (旧 react-query)
    クライアントフェッチ用ライブラリ。
    
    多機能で便利だがサイズ大きめ。
    

    View Slide

14. next-head-seo
    
    (SEO)
    zenn開発者のcatnoseさんが
    
    作ってる軽量ライブラリ。
    

    View Slide

15. vercel/og-image
    
    (OGP画像)
    Vercelにデプロイしておくと
    
    HTMLを画像として出力
    

    View Slide

16. Thanks!
    G's BASE FUKUOKA
    Webなんでも勉強会#05
    

    View Slide