Learn Next.js を終えてみた感想
こちらの、最新のNext.jsの基礎をハンズオン形式で学べるページで学習しました。
復習も兼ね、各章の雑感を書いていきます。
持っていた事前知識
pages routerだったころのチュートリアルはやっていて、
Next.jsを使うと色んなレンダリングを使い分けられるということはなんとなく知っていました。
また、Reactに関しては「Reactを学ぶ」 (https://ja.react.dev/learn) も全て読了済みでした。
動機
- 個人開発で最新のフレームワークを使いたい。
- Vercelでアプリをデプロイしていたが、Next.js のありがたみって何だっけ？となっていたのでちょうどよい復習になると思った。
- サーバーサイドレンダリングやサーバーコンポーネントなどなど、フロントエンドの最新の叡智がNext.jsには詰まっているとなんとなく考えていた。
各章雑感
Getting Started
Next.js のインストール。
CSS Styling
CSSスタイリング方法についてTailwindとCSS Modulesの2種類学びました。
clsxライブラリを使って、クラス名の条件分岐が簡単に出来るよ、というところが特に有用で、個人開発でも使っていきたい。
Optimizing Fonts and Images
Next.jsが提供するfontやImageタグなどの便利機能の紹介。
Creating Layouts and Pages
Layoutや、page.tsxを使ってルーティングを作成する方法について。
page.tsxファイルだけがルーティングになるということで、各ページに必要なロジックやらコンポーネントが同じディレクトリに分離しやすくなったのはapp routerの利点かと思います。
Navigating Between Pages
Linkコンポーネントの紹介。
Linkで指定されたURLは、バックグラウンドprefetchすることで読み込みを早くするとのこと。
ウェブサイトが１つのSPAのような動きができるので、UXが大きく向上する可能性を感じました。
Setting Up Your Database
VercelでのDBセットアップ方法について。
制約等はまだ見れていませんが、無料でPostgresも使えるので
個人開発レベルならバックエンド含めてVercelで全部完結できちゃうじゃん...と感じました。
Fetching Data
データフェッチにおけるサーバーコンポーネントの利点についての説明がありました。
従来のawaitなどが必要な関数呼び出しはuseEffectを使うのが通例でしたが、Next.jsではReact Server Componentsがデフォルトで使われるので、awaitを使ってシンプルに書けるのがいい感じです。
Static and Dynamic Rendering
@vercel/postgresを使う際は unstable_noStore を使わないとサーバーコンポーネントが static renderingをしてしまう(?)というのがややこしく感じました。
どこをどういじったら、どの部分がdynamicにレンダリングされ、あるいはどの部分がstaticなのか、というのがまだ曖昧なので、もう少しドキュメントを読み込む必要がありそうです。
Streaming
UI/UXの向上のためにスケルトンを導入するお話。
streamingによって、ページ全体が読み込まれるのを待たなくても、個別の要素を表示できるという機能。
ページ読み込みの際に表示される空のコンテンツをスケルトンと呼ぶのか、というのがまず一つの発見でした。
Partial Prerendering
どうすればコンポーネントがdynamicになるのか、という説明がここで出てきました。
飛ばしても良い章とのことですが、Streaming, Static and Dynamic Renderingの章と
合わせて読んでおくと理解が深まる章だと思います。
Dynamicなrouteとstaticなrouteを分ける境界をきちんと考え、Suspenceコンポーネントをどこに置くか、というのが技術者の腕の見せ所になりそうです。
Adding Search and Pagination
useSearchParams, usePathnameを使って余計なstate管理をせずに
検索画面を実装する、というのが画期的に感じました。
あと、leetcodeのTypescript問題で出てきたdebounceの概念の実用的な使い方を知ることができたのがちょっとした感動でした。
Mutating Data
server action, zodの概念が登場します。
サーバーサイドでコードを実行するのか、クライアントで実行するのかを非常に細かく制御でき、個人開発では重宝しそうな機能です。
ただ、業務でサーバーサイドのコードが肥大化したりしないのか？というのは気になるところです。
このチュートリアルではformのactionに指定することで実行されていますが、OnClickなどのイベントハンドラからの呼び出しでも実行可能でした。
revalidatePathが紹介されていますが、正直キャッシュの制御に関してはまだ難しいです。
自分で使いこなせる気がしない...
Handling Errors
エラー制御の話。
Error コンポーネントの第二引数、reset関数が地味に便利な気がしていて、
元のページに戻るような実装は、昔リクエストヘッダのrefererなどを使ったりなど面倒なことをしていた記憶があります。これはreset関数を呼び出すだけなので、簡単です。
Improving Accessibility
Zodの機能をフル活用して、Form validationを強化するお話。
Zodは使ったことがなかったのですが、useFormStateフックを導入して、FormData型の引数を持つ関数を定義して、リデューサっぽくdispatchをサーバーアクションとして指定して、と結構ステップが多く、自力でZodのリファレンスを参考にこれだけのバリデーションを実装しようと思うと中々大変だと思います。
ここで学んだやり方は自分でも十分利用可能なので、使いまわしていきたいですね。
Adding Authentication
Middlewareが登場します。
bcryptパッケージがMiddlewareでは使えないから、ファイルを分ける必要があるとのこと。
同じ言語のはずなのに、あるパッケージが使えたり使えなかったりと、Javascriptはここらへんがちょっとわかりづらいですね。
NextAuth.jsもきちんと理解していないので、他の資料も読む必要がありそうです。
Adding Metadata
メタデータとはなにか？というのとメタデータはなぜ重要なのか？という解説から始まり、
Next.js で具体的なメタデータの追加方法について説明がありました。
titleのテンプレート表示機能が便利で、ページごとにタイトルを変え、共通部分を再利用する仕組みが非常に便利です。
感想
ほぼ毎日30分ぐらいかけ、原文のまま頑張って読み続け、読了までは大体1ヶ月ぐらいかかった気がします。（多分相当遅いほうです。）
pages routerのチュートリアルには下記のような日本語和訳が存在していますが、
(https://qiita.com/thesugar/items/01896c1faa8241e6b1bc)
2024年3月現在はぱっと検索する限り英語版しか存在しません。
他のリファレンスも殆ど英語で書かれていて、それらを誰かが日本語訳してくれる保証はありません。
「日本語チュートリアルは終わったけど、公式ドキュメントは英語だから読むのがつらい...」
となってしまうと後々辛いです。時間はかかりましたが、英語に対する苦手意識を小さくできたのは良かったかなと思ってます。
Next.js 14以降は App router なんて呼ばれたりしますが、routingのやり方が変わったことに関しては正直学習コストはほとんどなく、実際に難しかったのはサーバーコンポーネントやら、Streamingのあたりでした。他に勉強されていた方でおっしゃっている方もいますが、やはりどの部分がサーバーサイドで実行され、どの部分がクライアントで実行されるのかがちょっとわかりづらかったです。このあたりは実際に手を動かして試行錯誤するまではわかりませんでした。
今回復習を兼ねてこの記事を書き、各章を改めて振り返りましたが、ところどころまだ頭の整理ができていない箇所があります。
さすがにこの長さのチュートリアルを何周もやる...というのは心が折れるので、開発中は公式ドキュメントを参照しつつ、時々Learn Next.jsもリファレンスとして使っていく、ぐらいの構えでいきたいと思っています。
Discussion