「実践Next.js - App Routerで進化するWebアプリ開発」を読んで雑にまとめる

資料

データ取得について

"clean-start": "rm -rf .next/cache/fetch-cache

データとして格納されている。

りょた 1ヶ月前に更新

動的レンダリングになる要因

動的データ取得(cache: "no-store"など)
動的関数(HTTPリクエスト関係の関数)の使用(headers(),cookies(), searchParams()など)
dynamic segment (旧dynamic routeだったかな？)の利用

りょた 1ヶ月前

規約について

layout.tsxはerror.tsxの親階層に位置します。そのため、layout.tsxで発生した例外は親Route Segmentのerror.tsxで処理されます。

これは注意かもしれない！あまり意識したことがなかった。。反省。

りょた 1ヶ月前

メタデータについて

generateMetadata関数では、第2引数のResolvingMetadataとして継承されたメタデータを参照できます。

ResolvingMetadata知らなかった。便利。

りょた 1ヶ月前

Route Handler

画面のRouteがHTMLをレンダリングするように、Route HandlerはJSONをレンダリングします。Route Handlerでは画面のRouteと同様に「静的レンダリング・動的レンダリング」を切り替えることができます。

この分け方があるのを知らなかった。

りょた 1ヶ月前

動的RouteHandlerになる要因
要因1：Dynamic Segment値の参照 {params: ""}
要因2：Requestオブジェクトの参照 (その都度Requestに応じる)
要因3：動的関数の使用 (cookies(), headers()など)
要因4：GETとHEAD以外のHTTP関数のexport
要因5：Segment Config Optionsの指定 ("force-dynamic"など)

りょた 28日前

こんなことできるのかー。
共通のビルドができるのかー。

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@acme/ui', 'lodash-es'],
}
module.exports = nextConfig

りょた 28日前

データ取得とキャッシュについて

りょた 28日前

パラメータ(引数)が異なるとリクエストのメモ化が効かない。

りょた 28日前に更新

cache関数を使用するときの注意点は「Reactコンポーネントの中で使わないこと」です。上記のように、コンポーネントの外側で使用します。もうひとつの注意点は「データ取得関数の引数はプリミティブ値でなければならない」という点です。

メモ化はfetchのみ。そのほかの関数にリクエストのメモ化を行うにはcache/react関数を利用する。オブジェクトを引数に渡すのはNG

りょた 28日前

unstable_cache これならコンポーネント内でも呼び出せる。

りょた 28日前

認証関係

りょた 28日前に更新

意図しないprivateな環境変数は空文字になる。

りょた 7日前

NextAuth.js

環境変数NEXTAUTH_SECRETの設定
Middlewareの設置
NextAuthOptionsの設定
Route Handlerの設置
getServerSessionの利用

りょた 7日前

ここは予約語のような扱いなのか。

NextAuth.jsは専用のRoute Handler api/auth/[...nextauth]/route.tsを使用します。

りょた 7日前

Intercepting RoutesとParallel Routes

りょた 7日前

★: Parallel Routes を使用する際は default.tsx は必須

りょた 7日前に更新

Parallel Routesだと確かにhistoryに残さない方が良いので、pushよりreplace。
router.replace(`/photos/${prevPhotoId}/view`, { scroll: false });

りょた 7日前

Server Actions

りょた 7日前

Formからサーバーの非同期関数を直接呼び出せる機能

中間コード（API Client）がなくなる
Browser向けにバンドルされていたAPI Clientが少なくなる
ハイドレーションが完了する前に実行できる

りょた 7日前

bindを利用すべきかどうかは要検討

りょた 7日前

revalidateはserver actionで利用することがおすすめ。

これは「Routerキャッシュ」というキャッシュにヒットしてしまっていることが原因です。

りょた 7日前

本節では「Server ActionのOn-demand Revalidationに優位性がある」と解説してきましたが、Route Handlerでしか実現できないケースがあります。それは「Next.jsアプリケーションの外側からOn-demand Revalidationを呼び出す」というケースです。もっともイメージしやすいのが「ブログ記事」です。外部のCMSサービスでブログ記事を書き、Next.jsがそのCMSからデータ取得する構成はよくあります。