どうもこんにちは、たくびー(@takubii)です。
今回はLearn Next.jsを通してApp Routerを使ったNext.jsのチュートリアルに取り掛かりました。
各章ごとに感じたことをざっくりとまとめていきたいと思います。
Learn Next.jsについては以下のリンクから見てください。
おすすめの進め方
Learn Next.jsの初期テンプレートではチュートリアルで使うコンポーネントやデザインがすでに作られています。
Next.jsやTailwindCSSに慣れている方はそのまま進めてもいいと思います。
ですが、環境構築を１から行い必要になるタイミングでコンポーネント等を追加していく進め方をしていくと、より実践的で勉強になると思うので時間のある方はこの進め方を試してみてください。
各章所感
chapter 1
- Next.jsの基本的なファイル構成の話です
- あまり読まなくてもOKなので、さらっと読んで次に進めるのがいいと思います
chapter 2
- スタイリングについて解説していて、さまざまなスタイルライブラリ等が使えると説明している章です
- ただ、このチュートリアルではTailwindCSSを使い、スターターキットではスタイリングされているので、この章もさらっと読んで次に進めるのがいいと思います
chapter 3
- フォントと画像周りの解説してる章で、実際にコードを書いていきますが、この章もあまり読まなくて大丈夫です
- 読んでおくと「へーそうなんだ」となる内容ですが、どうせ使うことになります
chapter 4
- 新しくページを作成していきます
- dashboardルートにレイアウトファイルも追加、サイドナビゲーションバーを作成、ボタンでpageを切り替えまで行いました
- この章から本格的に画面作成を行っていきます
- フルスクラッチで写経しているのでサイドナビゲーションバー用のコンポーネントを作成が時間かかりました
- ディレクトリベースルーティングについては以下の画像を参照してください
chapter 5
- コンポーネントを使ってクライアントサイドルーティングを行うように変更しています
- usePathnameとclsxを組み合わせて現在のパスと合っているボタンのカラーを変更する処理を追加しました
chapter 6
- vercelにアカウント作ってデプロイまで実施しています(簡単すぎて驚きます)
- その後vercel上にDB（PostgreSQL）を作成
- フルスクラッチだとDB作成用のseed.jsとplaceholder-data.jsを作成（大変でした）
chapter 7
- データを取得するためにデータベース取得用関数とそれらを使ったコンポーネントを作成
- フルスクラッチだとデータ取得周りがボリューム多くて写経が大変でした
- データ取得関数はPostgreSQLの文法を使ってVercelDBからデータ取得するという処理を作成しました
- ここで一気に型定義も追加
- コンポーネント作成は大枠作って詳細を作っていくとHMRで形になっていくのが見られて体験がよかったです
- 実際にチュートリアルで行っているのはデータフェッチ関数の呼び出しとそれぞれのコンポーネントを使うだけなので写経したほうが勉強になると思います（特にコンポーネントの作成部分で）
chapter 8
- 静的レンダリングから動的レンダリングへの切り替え方法について
import { unstable_noStore as noStore } from 'next/cache';を使うのは初見でした（実験的機能なので当然かもしれませんが...） -
export const dynamic = "force-dynamic"こちらの方が馴染みはありました - 次のチャプターへの準備という感じの章です
chapter 9
- 長いローディングが入った時にどのように対応するかというのが主題です
- 1つが
loading.tsxというファイルを作成してページが読み込まれるまで別のページを表示する方法 - もう1つがReactの
<Suspense>コンポーネントを使って、各コンポーネントごとに遅延読み込みをする方法 - 読み込んでいる間はSkeletonコンポーネントを使用してプレースホルダーとして表示させるという手法を使っていました
chapter 10
- Partial Renderingについての解説のみかつオプションなので読んでもどちらでもOKです
chapter 11
- Invoiceページを作成していくチャプターでした
- 入力情報を保存するためにSearchParamsを使っているのが特徴的
- 検索の実装も行います
- debouncingと呼ばれる入力に対してどれくらい待ってから処理するかという機能も追加
- その後ページネーション処理を追加、同様にSearchParamsにpageパラメータを追加して切り替えを行いました
chapter 12
- Invoiceの作成、編集、削除機能を追加
- フォームを使用し、取得したフォームデータからServer Actionのsqlでデータを編集しました
- バリデーションにはZodを使用
- revalidatePath()は引数のパスのキャッシュをリセットし、再読み込みする機能です
- Invoice編集機能ではDynamic Route Segmentを使用（これについては下記画像がわかりやすいです）
フォームで個別のIDを渡すために隠しInput(input type='hidden')を使わず、bindでIdを渡していたのが特徴的 ← ちょっと難しいと感じました - ダイナミックルーティングを行っていますが、ディレクトリ構成は以下の画像のようになります
chapter 13
- エラー処理についての章です
- ルーティング単位でエラーを処理したい場合は、対象のルーティングフォルダーに
error.tsxを作成します -
error.tsxはuse clientが必須、二つの引数を受け取り、errorはJSのErrorオブジェクト、resetはerrorルーティングのある場所へのリンク - 特定のエラーだけ処理したい場合、
notFound()関数を使うとnot-found.tsxへ遷移できます（ルート内に存在する必要はあります）
chapter 14
- アクセシビリティについての章です
- Formのバリデーションなどの実装
- バリデーションはサーバーサイドで行いDBにアクセスする前に処理しました
- アクセシビリティに関してとても勉強になる章なので一読した方がいいと思いました
chapter 15
- NextAuthを使った認証機能の追加
- username,passwordを使ったログイン機能の追加とログアウト機能の追加を行います
- NextAuthの使い方はこの章だけだとまだ不足気味なので使う時に改めて調べた方がいいです
chapter 16
- メタデータの追加方法について書かれています
- titleはテンプレートで記述できることを初めて知りました
補足
このチュートリアルではユーザー一覧ページについては取り掛かっていなかったので余裕があればチャレンジしてみてください
終わりに
最終的なコードは以下のようになりました。
チュートリアルとしてかなり読みやすく、Web標準について勉強になる部分もあったのでとてもいい題材だと思いました。
これからNext.jsを始めようという方にとってはぜひ一度目を通して、手を動かしてみていただきたいです。
私個人としてもApp RouterになってからのNext.jsの基礎を学べましたし、ここで身につけた知識で何か作りたいと思いました。
それでは今回はこのあたりで締めたいと思います。
ここまで読んでいただきありがとうございました。
また機会があればお会いしましょう。