Zenn
Closed5

今更だけど Next.js App Router 何が出来るん？スレ

Next.js
App Router
堀川登喜矢堀川登喜矢

App Router ほんわか感想

UI Componentの非対応は多いらしい

  • shadcn/ui の様なコピペだけで使えます！のUI Sample集が話題になるわけだと思った
  • ただ、MaterialUI など絶賛対応しているUI Componentもあるらしい
  • ポイントは ServerComponentで対応しているか否か

データ fetch

  • 親でfetchしたら、子で再fetchされないのは良いね

Server ComponentはStorybookでレンダリングできるの？

  • できる
  • experimentalNextRSC: trueでできるらしい
  • 実際にstorybookのclientでレンダリングされているわけではなく、Suspenceでmockしているんだとか

https://storybook.js.org/blog/storybook-react-server-components/

堀川登喜矢堀川登喜矢

チュートリアルしてみる

  • 公式チュートリアルは page routerらしいので、create-next-appの質問に答えて行くことで App Routerを選択する

Common Tips

  • layout.tsxというファイルを作ると、page.tsxをラップしてくれる
  • デフォルトがServer Component（"use client"でCSRできる）

Routing

  • app/posts/[id]/page.tsxの様にファイルを配置すればいい
  • それ程大きな変更は無かった
  • [id]という名前のディレクトリ名にちょっと抵抗があるくらいか
  • ()で囲んだ命名のディレクトリはPathに入らないからグルーピングに使える
  • _ prefix命名のディレクトリ以下は、Pathから全て除外される（いいね）

Data fetch

  • getServerSideProps(Link)はリクエスト時にデータFetchが必要なページに使う。（名前の通りserver側でfetch）
  • getStaticProps(Link)は、事前にビルドしてHTML等をCDNにキャッシュしたいページに使う
  • もちろん SWR などで Cilent Side Fetchも可能
  • 多くが廃止されていた
    • Server Componentを使えば、データFetchもサーバーで行う（Link）
    • Server ComponentでSG or SSRする書き方など

https://zenn.dev/frontendflat/articles/nextjs-data-fetching-rendering

堀川登喜矢堀川登喜矢

useSearchParamsはserver componentでは使えない

Error:
× You're importing a component that needs useSearchParams. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
│ Learn more: https://nextjs.org/docs/getting-started/react-essentials

https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional

params or searchParamsでURL のIDやParameterを取れるらしい。
なんか、、、魔法だ。

export default function Page({ params }: { params: { id: string } }) {
  const content: Content = getContent(params.id);
  return <Article content={content} />;
};
堀川登喜矢堀川登喜矢

RSCでuseState, useEffectなどは使えない（当たり前）

Server Componentでは、Client上での状態や副作用などを扱う機能は利用できない
使いたければ、"use client"を指定した子Componentなどを作って対処はできる。

名前の通り、Serverでレンダリングして欲しいComponentをRSCにする。（Re: 当たり前）

このスクラップは3ヶ月前にクローズされました