概要
Udemyでかなりお得なセールをしていたので、Next.jsについて学び直しました。
受講したコースは、以前もお世話になった講師の方の最新のコースで、前回同様とても良質だったので、どんなことを学べるのかまとめました。
ただし、有料コースなのですごくざっくりした紹介程度です。
どちらもTypeScriptを使っているので、「TypeScriptわからないよー」って人はまずTypeScriptを学びましょう。
NextjsとSupabaseによる高性能Web開発
すごくおすすめです。
SupabaseというBaaSを使用していますが、本題はNext.jsの仕様の話です。
サイトアーキテクチャ
以下のアーキテクチャについて詳しく学べます。
これを知ることで、作成するサービス・サイトをどのような設計で作ればいいのかがわかります。
- SSG（Static Site Generator ）
- SSG + CSF（Client side Fetching）
- SSR（Server side Rendering）
- ISR（Incremental Static Regeneration）
- on-demand ISR
とくにon-demand ISRは、データベースの状態を監視して、更新があったタイミングで（該当するページの）静的なページを再生成する機能で、データベースに更新がないのに再生成をしてしまうISRに代わる設計手法です。
Web Vitals
サイトアーキテクチャごとに、Vercelサーバーにアクセスしたときのレスポンス速度や、コンテンツが表示されるまでの速度を計測します。
- TTFB（Time To First Byte）：最初の1バイトを受信するまでの時間
- FCP（First Contentful Paint）：視覚コンテンツの初期表示時間
- LCP（Largest Contentful Paint）：視覚コンテンツの最終表示時間
Supabase（ざっくり）
Firebaseの後継になるかも？
- Authentication
- Data Table
- Policy
状態管理
React-queryはいいぞ。
- Zustand：クライアントサイド
- React-query：サーバーサイド
[応用編] NextjsとSupabaseによるリアルタイムWeb開発
上記のコースを受講した後に、このコースを受講しましょう。
このコースでは、Supabaseを使ってより実践的なアプリケーションを作ります。なので、Next.jsについて詳しい解説はしていないです。
がっつりコーディングする感じなので、内容的には薄いかなって思いました。
余力のある方は受講する感じで。
Subscription
データベースを監視して、変更があった場合に、クライアントサイド側に即座データを反映させる方法を学べます。
これによって、簡単なチャットアプリ（簡易的なTwitter）のようなものを作ります。
Supabaseの使い方
- Authentication
- Data Table
- Policy
- Storage
- RLS（Row Level Security）
- TLS（Table Level Security）
E2E（End to End） Test
- Cypress
感想
自分のポートフォリオサイトを作るくらいだと、どうしてもNext.jsの機能を活かしきれません。
ですが、こんなにも素晴らしいポテンシャルを持っているので、積極的に使っていきたいです。
あと、普段あんまりカスタムフックを使わないので、カスタムフックの処理はすごく勉強になりました。