$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

    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