Learn Next.js メモ

いもけん

chapter 1

いもけん

chapter 2

/app/layout.tsx が最上位のレイアアウト

いもけん

chapter 3 (フォント、イメージ最適化)

CLSが発生しないようにフォントを最適化したほうがいい

next/font を使用すると、ビルド時にフォントファイルもダウンロードし他の静的アセットとともにホストしてくれる

subsets フォントの中から必要な文字だけを取り出すことができる(下記のコードではラテン文字だけ)
weightを使うと太さも必要なものだけを取得できる。

export const inter = Inter({ subsets: ['latin'] })

antialiased: フォントが滑らかになるtailwindのクラス

next/Image
srcは/でpublicにアクセスすることができる(相対パスを頑張る必要がない)
widthとheightはできるだけ指定したほうがいい、アスペクト比は自分で計算する

画像を静的インポートするとwidth,height,blurDataあたりを自動でやってくれる

いもけん

chapter 4 (レイアウトとページの作成)

layout.tsx: layout.tsxを配置したルート以降のページに適応される
共通のレイアウト部分はサイレンダリングされないので、無駄なレンダリングを減らせる

/app/layout.tsx(RootLayout): 必ず定義しなくてはならない、全てに適応されるレイアウト

いもけん

chapter 5 (ページ間の移動)

a要素を使うと画面がフルリフレッシュされる -> next/Linkを使う

プリフェッチはバックグラウンドで行われる処理なのでメインの処理はブロッキングされない
プリフェッチが多くなってもアプリが重くなることは基本的にない
しかしプリフェッチが多いと高額な請求が来ることがあるので注意
Dynamic Routesの場合は最小限のprefetchのみをしてくれる

デフォルトはサーバーコンポーネント -> 'use client'をつける必要がある

usePathname : 現在のパスネームを取得することができるフック

いもけん

chapter 6 (データベースのセットアップ)

データベースのリージョンは、アプリケーションをホストしてるリージョンの近くにおいた方が早い

vercel/postgresは日本リージョンがない

データベースのリージョンは後から変更できない

いもけん

chapter 7 (データの取得)

サーバーコンポーネントではasync/awaitでデータ取得(非同期処理)ができる

export default async function Page() {
  const revenue = await fetchRevenue();
...

データの取得では、相互にブロックしリクエストウォーターフォールを発生させてしまう
(前のデータのPromiseが解決した時に、次のデータリクエストが動き出す)

取得したデータを次のリクエストで使用したい時には、このパターンは必要

リクエストウォーターフォールを回避する一般的な方法は、並列処理(Promise.all()、Promise.allSettled())するが並列処理すると一つ遅い処理があると逆に遅くなる場合もある

いもけん

chapter 8 (静的レンダリングと動的レンダリング)

unstable_noStoreを用いることで静的レンダリングをオプトアウトできる
デフォルトでは静的レンダリングなので、ビルド時にデータ取得するが、静的レンダリングをオプトアウトすることでリクエスト時にもデータ取得してくれるようになる
このような設定は関数単位でもできるが、ファイル単位でもできる(Route Segment Config)

いもけん

chapter 9 (ストリーミング)

(チャンク: ひとかたまり的な意味)

ストリーミングを使うことで、準備ができたところから段階的にデータ転送できる
遅いデータがあっても、ページ全体がブロックされることはない

loading.tsxを使用することでページ全体をストリーミングすることができる
Suspenseを使用することで、部分的(コンポーネント単位)でストリーミングすることができる

<Suspense fallback={<RevenueChartSkeleton />}>
    <RevenueChart />
</Suspense>

細かくストリーミングするとポップ効果(目がチカチカする)が発生してしまうのでよろしくない

メインコンポーネントでデータ取得すると、本来静的である部分もデータフェッチが終わるまで表示されなくなってしまう
コンポーネントごとにデータ取得した方がUXが良くなる

いもけん

chapter 10 (Partial Prerendering (オプション))

PPR: 静的な部分と動的な部分を共存させることができる(必要な部分だけ動的になる)

フォールバックの部分が初期静的ファイルに埋め込まれる