Udemy「Next.js 13 App Router による次世代Web開発」修了
Zin nuxさんがUdemyで公開している「Next.js 13 App Router による次世代Web開発」というコースを修了しました。
https://www.udemy.com/course/nextjs-supabase-app-directory/Next.js 13の新機能であるApp Router(appディレクトリ)について解説されているコースです。Supabaseを使用するコースですが、App Routerについて解説されているコース前半については特別Supabaseに依存した内容ではなく解説向けの単純なデータベース用途でしかSupabaseを使用されていないので、App Routerの大枠を掴むには良い内容だと思います。後半についてはサインアップ/サインインとToDoリストの管理の実装をしていくというSupabaseにかなり依存した内容にはなっていますが、それらをApp Routerを絡めて学べたのは良かったです。
私としては満足の行くコースでしたが、全体的にかなりサクサク進むので全部のコードを手元で書き写したい人にとってはやや進めにくそうな気がします。コードがGitHubに用意されているので、都度リポジトリからコピペしたり最初からリポジトリをクローンしておくといった受講の仕方の方がこのコースには向いてそうです。
コース自体はApp Routerがベータだった時期に作られたみたいですが、リポジトリはNext.js 13.4.1を使用する形で更新されていますし、テキストでの補足も入っているので今から受講しても問題は無いと思います。
Next.jsのバージョンについては私は13.4.1で合わせずに受講時点での最新の13.5.4を使用したのですが、以下の2点で少しハマりました。
- コースにてrevalidateの挙動の確認があったが、13.5.4ではrevalidateにバグがある。
- https://github.com/vercel/next.js/issues/56231
- next buildしてnext startしても機能しているようには見えない。
- どのバージョンから発生しているバグなのかは不明。
- 13.4.1以降のどこかでビルド時のfetch周りの検証が厳格になった？
- コースにて、講師はApp Routerのエラーハンドリング(error.tsx)の確認としてfetchで使用するURLをあえて不正な物に変更して確実にエラーが発生する状況を作っていたが、13.4.1ではビルドが成功していた。
- 13.5.4ではfetchを使用する関数内で確実にエラーが発生するようなコードにしているとビルド時の検証でエラーが発生するようになっていた。
- next devでは同じコードでerror.tsxが機能することが確認出来た。