refactor: Next.js13.4 App Routerへの移行

[kyonenya]

参考

• react-selectをreact-hook-formで使う | Goodlife.tech
• labelタグでfocusを効かせる
• 親の状態に基づいたスタイル設定 - TailwindCSS
• Tailwind の peer で要素の状態の変化で、自身の後にくる兄弟要素のスタイルを変更する | DevelopersIO
• CSS Star Override of Checkbox - JSFiddle - Code Playground
• react-hook-formでregisterとControllerのどちらを使うか - mrsekut-p
  • なるべく register で事を済ませたいよね
• Running tests on different environments - Using multiple .env files.
  • 基本 .env ファイル使え、テスト時は dotenv-cli でやる
• Connection pooling with Supabase
• [キャッチアップ] Prisma + supabase DB におけるコネクション管理
• DBテスト用にDBもう一個用意しておくか……？
  • PlanetScaleにしとけばここ簡単だったな
• テストライブラリ、mochaを剥がしてJestは嫌いだから蹴って、Node.js組み込みのテストランナーを使いたい
  • https://nodejs.org/api/test.html
• tailwind, enabled修飾子も使える
  • Reactjs - Tailwind CSS - ボタンが無効になっているときにホバー時の変換/遷移を無効にする方法は? - スタックオーバーフロー
• noButton やめて asChild にする
  • React コンポーネントの表示する HTML 要素を変える asChild prop を実装する - Qiita
• 【Tailwind和訳】CUSTOMIZATION/Breakpoints
  • @media print
• Button の isDisabled をカスタムデータ属性でスタイリング
  • ARIA attribute variants - アクセシビリティを意識した tailwind modifier のすすめ - Qiita
• Functions: useRouter | Next.js
  • useSearchParams 良さげじゃんと思ったけどかなりしんどいことやってる。router.push も文字列しか受け取らない仕様になってるし
• クライアントコンポーネントでsearchParamsを自由に書き換える
• twMergeとtailwind-variantsを使うときのインテリセンス
  • paolotiu/tailwind-intellisense-regex-list
  • how to config vscode to show autocomplete  nextui-org/tailwind-variants#17 (comment)
• navigation系のAPIのうちどれがサーバーサイドでも使えるの？
  • usePathname, useRouterはだめ
• [slug] ページのお手本：nextjs-app-dir-example/app/articles/[slug]/page.tsx at complete · azukiazusa1/nextjs-app-dir-example · GitHub
• "next lint は /pages, /app (experimental appDir 機能が有効な場合のみ), /components/, lib/, src/ ディレクトリにある全てのファイルに対して ESLint を実行します"
  • API Reference: Next.js CLI | Next.js
• next lint は lint 対象のディレクトリが制限されている - mizdra's blog
  • next.config.js に追加：next.js eslintで対象とするディレクトリやファイルを変更する方法 – Tech Blog
• Next.js + TypeScript + ESLint + Prettier で開発環境を構築 | ものレボ株式会社のメンバーブログ
  • ESLint設定はこれくらいシンプルでいい
  • 煩雑な例：dotfiles/next-ts/.eslintrc.json at master · siakas/dotfiles · GitHub
• ポップオーバー API で JavaScript を使わずにポップアップを表示する
  • JS不要という点で Dialog API に勝る
  • iOS17 にするか…… "popover" | Can I use... Support tables for HTML5, CSS3, etc
• TailwindCSSでコンポーネントを作成するときに意識していること
  • ComponentProps
• スタイルを上書きできるコンポーネントはなるべく作らない方がいいという話 - Qiita
  • twMerge を極力使わない
• Tailwind Variantsに触れてみるという記事を読んで自分も触れてみて思った注意点
• Implementing Dark Mode in Next.js (App Router) with Tailwind CSS
  • colorMode 切り替えボタン自体は状態を持つから use client 必須なんだけど、layout.tsx の html を弄るところや、cookie に保存するところなどは是非とも参考になる

Server Actions のエラーハンドリング

結論：無理。Server Component には useState がないが、データフェッチ後のエラー表示には state 相当のものが必要なので、無理です

• Vercelの中の人ががんばってるらしい：https://twitter.com/leeerob/status/1655631561969000454
• react-error-boundary - npm
  • こんなに単純ではないはず。この程度のことはNext.jsにも実装されててエラーも取れてる
• React18の新機能 Suspense機能を使ってローディング画面とエラー画面を表示してみよう - Qiita
  • react-error-boundary - npm
• Mastering Next.js Error Handling with the App Router — SitePoint
• エラーコンポーネント - React
• 「エラー境界は以下のエラーを捕捉しません： 」
  • イベント・ハンドラ（詳細）
  • 非同期コード（setTimeoutやrequestAnimationFrameコールバックなど）
  • サーバー側のレンダリング
  • Error Boundaries – React
• Next.js Server Actions でのエラー周りの挙動を確認する
  • これもっかい見直してたけど、form全体がエラーで塗りつぶされては困るのよ。エラートーストに逃げるか？（いやToast はclient componentか……）
• Server Actions and the experimental useFormStatus hook
  • useFormStatus は pending だけのようだが
  • しかもクライアントサイドでしか使えない。
  • https://twitter.com/mecoupz/status/1655922267681878017
• Error handling for Server Actions vercel/next.js#49426 (comment)
  • useFormStatus に error も含まれてると言ってる。本当ならそれで済む話
  • 言ってない。願望の話。実際はこう
  • 
• useState なしでエラーハンドリングするって縛りが困難なのか？
• supabase の Auth UI だと error って statae をもとに "Invalid login credentials" を表示するだけ、簡単
  • auth-ui/packages/react/src/components/Auth/interfaces/EmailAuth.tsx at main · supabase/auth-ui · GitHub
• ルーティング: エラー処理 | Next.js
• ReactのErrorBoundaryで内部のエラーをキャッチする
• バリデーションして error.tsx とかでキャッチするんじゃないの？
  • nextjs-server-actions-example/app/TweetForm.tsx at main · azukiazusa1/nextjs-server-actions-example · GitHub
• バリデーション - Next.js の Server Actions について
  • バリデーションまでしっかりやってる。でも本当に難しいのはサーバー側のエラーなんだよな
• 【PHPと一緒だなんて言わないで】Next.js@13.4によるZero API Web Application
  • この記事なんか違くねえか。formAction とか <form action={/* ... */}> みたいな記述がなくただ onClick にサーバーサイド関数ハンドラを渡してるぞ
  • いや、いいのか。「サーバーミューテーションを行っていない場合は、他の関数と同様に、関数をプロップとして直接渡すことができます」
    • startTransition なしのカスタム呼び出し - データ取得: サーバーアクション | Next.js
• Next.js Server Actions でのエラー周りの挙動を確認する
  • zodエラーをerror boudaryでキャッチするかね

Supabase Auth

• UI 作りに大苦戦
  • ダーク：Supabase UI
  • ライト：https://manuscript.vercel.app/login
  • Tailwind CSS Login Form - Flowbite からコピーして弄ってる
    • アイコン付きInputとかは汎用化したい
• 試行錯誤の履歴：https://github.com/kyonenya/next-13-4-playground
• Supabase Authのアップデート #18

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
manuscript	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 3, 2023 6:47am

[kyonenya]

完コピで草

• text-strong, medium, weakなどをコンポーネント化。色以外に関心を持たないコンポーネント
• 背景色もそうしたいけどモーダルとかボタンホバーとか考えるとしんどい？ ベースと浮き上がりとさらに浮島、くらいは分けたいが。これも色以外に関心を持たない
• ホバー色は Tailwind Variants でボタン側に用意しておくべき。どう考えても！

[kyonenya]

• ログインせず見る、ボタン

[kyonenya]