$30 off During Our Annual Pro Sale. View Details »

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

morizyun
October 01, 2022

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

morizyun

October 01, 2022
Tweet

More Decks by morizyun

Other Decks in Technology

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