Nextチュートリアル

loading.tsxはNextにおいて特殊なファイル名であり、ページコンテンツの読み込み中に代替されるファイルとなる。

loading.tsxの配下にpage.tsxが存在すると、それらに対しても適応される。

(overview)のようにカッコで囲んだフォルダを作成してその配下にloading.txtを格納することで、並列以上のフォルダへの適応を回避できる。

React Suspenseを利用すれば、ページ全体ではなくより細かいローディングの適用が可能。

Suspenseを利用することで、一部のコンポーネントに対してローディング画面の適用が可能。

今更ながら、jsの基本的な実装ルールを覚えられていないので、React・Nextに関することは把握しておきたい。

Partial Prerendering (PPR).
事前にサーバ側でレンダリングを済ましておくもの。

next.config.mjsにincremantalというオプションを追加しておく。

合わせて、export const experimental_ppr = true;の定義をtxs側に追加することで実現できる。

incremantalを入れるとビルドエラーが発生する。
https://hisuiblog.com/next-js-partial-prerendering-ppr-cant-build/
reactのバージョンが19.0.0以上が必要のよう。

今回は適用させないでおく。

URLSearchParamsを利用することで、?page=1&query=a.のようなURLパラメータを取得できる。

ページの再描画なしで検索結果を表示させられる。
以下にそのあたりの情報あり。
https://nextjs.org/learn/dashboard-app/navigating-between-pages

Searchはクライアントコンポーネント、useSearchParamsフックを利用してパラメータにアクセスする。Tableはサーバコンポーネント、これ自体でデータをフェッチでき、searchParamsにページからパラメータを渡すことができる。

onchangeだとキーストロークのたびにDBアクセスが発生するが、本来はタイピングが終わった時点でDBアクセスすれば十分。
ビルド時に以下のコマンドを実行して、useDebouncedCallbackを利用すれば実現できる。
pnpm i use-debounce

Paginationを利用してページングを実現する。

revalidatePath('/dashboard/invoices');が必要な理由がいまいち分からなかった。

[id] や[slug]を設定することでダイナミックセグメントと呼ばれるディレクトリ構成を確保できる。

error.tsxを作成することで、すべてのエラーに対するエラーハンドリング処理を設けることができる。

ファンクションに対して、throw new Errorを付与するとか、Javaに似ている。

動作確認時にuseActionStateが使えないという実行時エラーが発生した。
理由は、react・nextのバージョンがuseActionStateが利用できるバージョンのものと合致していなかったため、つまりチュートリアルで指定されたものと異なったため。
対応としては、チュートリアルのバージョンを参照してpackage.jsonを修正した。
pnpm installを実行して、package.jsonに指定したバージョンのモジュールを再インストールした。

チュートリアルを実施後、vercelにデプロイをしたらエラーになった。
envに設定した内容と同じものをvercelのsetting→Environment Variablesにおいて設定する必要があった。
具体的には以下。
・NEXTAUTH_URL
・AUTH_SECRET

vercelで確認してみると、invoiceの新規登録時に連続ボタン押下すると、押下数だけ新規レコードが登録されている模様。

import { Metadata } from 'next';
上記でMetadataを利用できるようにして設定。