なるべくコードを書かず、でもノーコードでもなく、程よい感じで速度感早くプロトタイプをつくりたいとおもうと・・・

前提

• 私はフロントエンドはあんまり得意じゃない（モバイル、ウェブともに開発したことはあるが正直、得意とは思っていない）
• バックエンドはまあまあ得意だけど、プロトタイプの段階でバックエンドを作るメリットは感じていない（重要なのはDBであってバックエンドではない）
• ML、AIなどの知見はそれなりにある
• 小さなサービスで、toC 向けのあんまり規模を狙わないものを作っている前提

一旦現状採用している技術

• Next.js
  • App Router を使う
    • Route Handler は外部から呼び出されたいルートを定義する
      • たとえば、Auth0 の Trigger から API を呼ぶとか、そういう時
      • API を作る気はあんまりないが、必要なシーンが出てきたら server action などの実装を Route Handler に持たせる想定
    • それ以外のサーバー処理は各ページに Server Action を定義して一旦進める方が早い
      • Server Action 内で画面で必要なデータを生成する。APIは作らない
    • App Router で定義する各 page.tsx がある種、MVVM の VM となるようにしてしまう
      • page.tsx は RSC にしておくのが良さそう。中身のコンポーネントは用途に応じて Client Component か Server Component かを切り分ける
      • router.push を行うと、画面の state を強制的に更新できる、という構成にしてしまうイメージ
      • 画面内で、逐次変わるデータを useState で持たせておくようなイメージ
  • Server Component, Server Action も使いつつ、Client Component での ISR もちょこっとやる
    • ページを再読み込みさせずに、値を再度取得してデータを更新したいケースが一部あるため
  • どうにかして欲しい点
    • 'use server' 'use client' を使い分けはじめると、どのコンポーネントがどこで生成されているのかわからんくなりがち。
• Vercel
  • Deploy, DB などは全て Vercel 経由で作る（ Neon, Auth0 は Integration として利用しているだけ）
  • CDK などインフラを構築するためだけに使うツールはなるべく作らず、Framework-defined で Vercel になるたけ勝手にやってもらう
    • CDK はオンボが面倒な割に、触る機会が少なく、変に始めるとわかる人がやるになりがちのため
  • v0
    • デザインセンスが皆無のため、情けないが私が考えるより v0 が考えた方が正直ファンシーなものができる
    • Presentational Component を v0 に作ってもらう、と割り切ってファイルをコピペすれば、既存のコードも v0 が修正しやすいように書くのがおすすめ
      • shadcn の ui コンポーネントがある意味、atomic なコンポーネントとなるので組み合わせと体験は v0 に考えてもらうと割り切れば使い勝手が上がるし、Storybook などとの親和性を維持できる
      • なので、v0 を使って開発する場合は自分で /components のコードを直すことはせず、v0 に直してもらうようにするのがおすすめ。
  • 採用している Integration
    • Auth0
      • toC だと無料枠で全然事足りる。ユーザーも数万まで行くまで猶予があると見込まれるし、スパイクすることがあっても課金すればいいだけ
      • 認証用の画面を Provider や Route Handler で提供すればすぐに提供できるためめんどい実装をしなくて良い
      • どうにかして欲しい点
        • Trigger のデバッグが鬼めんどい。ログがあんまり出ないのが本当にこまる
    • Neon
      • Serverless Postgres は Supabase などもあるが、Vercel と微妙にコンセプトが被っていて使いにくい。
      • Auth0 で認証することにした関係で、ピュアな Serverless Postgres の方がよく Vercel がβでサポートしている Neon にした。
      • Vercel が勝手に環境変数を設定してくれるので、 Vercel CLI で環境変数を pull して使えばよいので楽
      • どうにかして欲しい点
        • vercel から作った時、vercel の integration ページからしか閲覧できないっぽいんだが、テーブルを確認したり、云々がちょっとめんどい
  • どうにかして欲しい点
    • Blob Storage を早くGAにしてくれ・・・

この辺読んでて、設計はこんな感じにすればいいってことなのかな？
https://zenn.dev/akfm/books/nextjs-basic-principle/viewer/part_2_container_1st_design

app/
  page.tsx
  products/
    _containers / # container component を配置
      xxx-xxx.ts # データフェッチを行う container component (server component) 
      action.ts  # コロケーションを実現 (server action) 
    page.tsx     # _components を使って UI を組み立て (server component)
components/      # presentational component (client component) 
  ui/            # shadcn が提供するコンポーネントたち
  xxx-xxx.tsx    # v0 が自動で生成する