松竹梅

nextjs14 備忘録メモ

投稿日

Routeについて

以下用語を抑える

Tree: 階層構造を視覚化するための規約。例えば、親コンポーネントと子コンポーネントから成るコンポーネントツリーやフォルダ構造などがあります。

Subtree: ツリーの一部で、新しいルート（最初）から葉（最後）までの部分です。

Root: ツリーまたはサブツリーの最初のノード、例えばルートレイアウトです。

Leaf: 子のないサブツリー内のノード、例えばURLパスの最後の Segmentです。

Segment: /で区切られたURLの一部

Path: ドメインのあとに続くURL文字列

Route Segment: 特定のpathに対応するsegment

next.jsではappディレクトリにpage.js(tsx)ファイルを配置することで簡単にページを表示できる

ナビゲーション

next.jsは画面遷移の際、変更されたRootSegmentのみが再レンダリングされる「ソフトナビゲーション」である

<Link>だけじゃないナビゲーション

useRouter Hookを使うと現在のルートに関する情報を取得したり、ユーザーの前後の履歴に遷移など、<Link>コンポーネントにできない様々なことができます

const router = useRouter()

  // 現在のルートに関する情報を取得
  const pathname = router.pathname
  const query = router.query
  const asPath = router.asPath

Server Component / Client Component

  • server component: nextjsではデフォルト。サーバーサイドでのみ実行されるためコンポーネントのjsファイルがブラウザに送られることがなく、高パフォーマンス
  • client component: 'use client'が宣言されたコンポーネンファイルをRootとしたSubtree全体で適用される

データ並列取得

const a = await ...
const b = await ...
↓
const [a,b] = await Promise.all([...,...])

直列より並列のほうがbetter

nextのfetch

  • 動的データ：頻繁に更新されるデータ
  • 静的データ：あまり更新されないデータ

静的データをキャッシュして高速にするため、next.jsのfetch関数は拡張されている。

デフォルトではキャッシュが残るので動的データにはfetchの第二引数にcache: "no-store"を指定する

静的・動的レンダリング

自動で静的レンダリングされるが、以下の条件で動的レンダリングされる

動的データ取得した場合（cache:no-cacheを適用）

動的関数の使用

→cookies()

→headers()

→searchParamsの使用

→useSearchParams()

ダイナミックルーティング

Dynamic Routes

[slug]で囲む

[...slug]で囲むとより深い階層のparamsも取れる

[[...slug]]とするとさらに囲む前のURLリクエストにも応じる

Route Groups

()でフォルダ分けする

それぞれにlayout.tsx(js)を適用できる

Parallel Routes

@folderというフォルダ名規約を使用（Slotという）

Slotはchildrenと同様にPropsとして渡される

Intercepting Routes

parallel routesで(.)(..)などのファイル規則

Routeを横取りする

ソフトナビゲーションでモーダル画面を表示するなどのUI実装で使用

Categories