React Server Components について

React Server Components はある種の多段階計算である
stage 0 と stage 1 が誕生
これまではデフォルトが stage 1 だったが、stage 0 がデフォルトに
stage 0 はステートがない (= useState が使えない)
stage 1 のファイルには"use client"と記述する必要がある
サーバーとクライアントがそれぞれ何を実行するかは以下

	サーバー側	クライアント側
従来型（SSRなし）	-	stage 1
従来型（SSRあり）	stage 1	stage 1
RSC（SSRなし）	stage 0	stage 1
RSC（SSRあり）	stage 0 + stage 1	stage 1

kotono

App Router について

app ディレクトリを使う
- pages ディレクトリと App Router を併用することも可能？未調査
デフォルトは Server Component
- useStateとかuseEffectが使えない
- onClickやonChangeも使えない
Client Componentにしたい場合は"use client"と明記

Pages について

index.tsx -> page.tsx に変える必要がある
このファイルはデフォルトで Server Components になるが、ファイル最上部にuse clientと記述することで Client Components に変更可能

Layouts について

ページ間でレイアウト共有ができる
state を持つことができ、再レンダリングしない
layout.tsx というファイル名である必要がある
レイアウトファイルはデフォルトで Server Components になるが、ファイル最上部にuse clientと記述することで Client Components に変更可能
レイアウトファイルでデータフェッチもできる
- 詳細 https://nextjs.org/docs/app/building-your-application/data-fetching
親レイアウトから子レイアウトにデータを渡すことは不可
- しかし、何度でも同じデータをフェッチすることは可能で、Reactはパフォーマンスに影響することなく自動でリクエストをdedupe(重複排除)してくれる

Root Layout (required)

最上にある Layout ファイルをRoot Layoutと呼ぶ
appディレクトリにはRoot Layoutが必須
後述のRoute Groupsを使う場合のように、Root Layoutは app ディレクトリ直下に置く必要はない
Root Layoutには<html>タグと<body>タグが必須

Nesting Layout

Layout はデフォルトでネストする
詳細は未調査

Route Groups

Route Groupを使うことで、URL に反映させずにフォルダをグループ化することができる
- フォルダ名を(example)のように()で囲む
- Route Group の下にlayout.tsxを置くことで、各グループごとにレイアウトを適用させることができる
  - ただし以下の画像のような構成の場合はそれぞれのRoot Layoutに<html>と<body>が必須
- (marketing)/about/page.tsxと(shop)/about/page.tsxはどちらも/aboutになるためエラーになる

Link と useRouter について

usePathname()
scrollオプションをつけることで<Link>を押下したときやrouter.pushした際にページ位置を維持することが可能
- https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#disabling-scroll-restoration
useRouter()は Client Component のみで使用可能
公式ドキュメントは特別な理由がない限りuseRouterじゃなくて<Link>を使うことを推奨

Recommendation: Use the <Link> component to navigate between routes unless you have a specific requirement for using useRouter.

Dynamic Routes

generateStaticParams

generateStaticParams関数を使ってfetch したデータは自動でメモ化され、Layout や Page 間でも共有される
getStaticPathの後継

Data fetch

getServerSidePropsをasync/awaitに書き換える必要がある
- https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch

async function getData() {
  const res = await fetch('https://api.example.com/...')
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
 
  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error('Failed to fetch data')
  }
 
  return res.json()
}
 
export default async function Page() {
  const data = await getData()
 
  return <main></main>
}

CSS について

Servere Component では CSS in JS がサポートされていない
- CSS in JSが使いたければ Client Component にする必要がある
  - MUI (https://mui.com/material-ui/guides/next-js-app-router/)
- Emotion は Client Component でもまだサポートされていない https://github.com/emotion-js/emotion/issues/2928

If you want to style Server Components, we recommend using CSS Modules or other solutions that output CSS files, like PostCSS or Tailwind CSS.

App Router時代のゼロランタイムCSS in JSに何を使えばいいの？

参考になった記事

公式ドキュメント
- https://nextjs.org/docs/app
Next.js 13 app directory で記事投稿サイトを作ってみよう
- https://zenn.dev/azukiazusa/articles/next-js-app-dir-tutorial
Next.js App Router (app ディレクトリ) の逆引き辞典
- https://zenn.dev/yumemi_inc/articles/next-13-app-overview
App Router時代のデータ取得アーキテクチャ
- https://speakerdeck.com/uhyo/app-routershi-dai-nodetaqu-de-akitekutiya

App Router で MSW が使えないことに関するイシュー

https://github.com/mswjs/msw/issues/1644

kotono

react-use

useGetSet

ネストしたファンクションでうまくステートが更新されないバグを回避できる