App Routerの素振りをする

API Routesの代替

https://nextjs.org/docs/app/building-your-application/routing/router-handlers

• 標準のRequest, Responseを利用するらしい
• ファイルの命名規則は route.ts とする
  - 例: app/api/route.ts → /api

apollo-serverの導入

以下があり、experimentalであるもののapp routerに対応している

https://github.com/apollo-server-integrations/apollo-server-integration-next

apollo-clientの導入

最近App Routerにexperimentalで対応した

https://www.apollographql.com/blog/announcement/frontend/using-apollo-client-with-next-js-13-releasing-an-official-library-to-support-the-app-router/

キャッシュをServer ComponentとClient Componentで共有ができないため、どちらか一つで取得するよう利用者が選択する必要があるらしい。結構設計に制限が出る気がする…？

今回は取り急ぎClient Componentに導入する形で進めてみる

ApolloProviderをどこに追加するか？

pagesの時は_app.tsxに書いていた処理をApp Routerではどうする？

→ layout.tsxに追加すればよさそう。

https://nextjs.org/docs/pages/building-your-application/upgrading/app-router-migration#migrating-_documentjs-and-_appjs

Client Component

'use client' ディレクティブについて

• app directory以下のコンポーネントはデフォルトでserver componentとなり、 'use client' ディレクティブを付与することでopt-inする
  • 可能な限りleaf nodeに寄せるのが望ましい

Q: use client をどのタイミングで付与すれば良いのか？

• 今回のプロジェクトはbulletproof-react的なfeaturesの分割を、monorepoのパッケージ分割によって実現するアーキテクチャを想定している
• app dir内のコンポーネントに use client を付与するのは直感的にわかるが、基本的に別パッケージで実装したものをimportするだけとなる
  - importするタイミングで use client を追加する形でよいのか？
  - また、app dir内ではどういったディレクトリ構成にすればよいか？

→ 以下を見る限り、app directory内でのコロケーションを想定されていそう

https://twitter.com/d151005/status/1659359491551547392?t=D0KrQpXr9r29k-Vc6YA0UA&s=19

Q: client component → server componentの順でネストしている場合、server component はSSR/CSRの両方でレンダリングされる認識でよいのか？

Q: client componentはpages directoryのSSRの挙動と考えていいのか？pre-renderingは行われる？

A: おそらくそう。Chromeのdeveloper toolでJavaScriptを切った状態でページをロードするとDOMとして存在していた。

getStaticPathsの代替

• generateStaticParamsが代替となる
  • Functions: generateStaticParams | Next.js
  • dynamic routingのpage.tsx内に関数を定義すると呼ばれる
• Q: 型は提供されている？
  • なさそう？ https://github.com/vercel/next.js/issues/41884
• Q: generateStaticParamsで返却したslugの配列以外のslugで読み込んだ時に404になる？
  • 自分でハンドリングする必要がある。データ取得に失敗したときに notFound() を呼ぶなど
  • ref: https://zenn.dev/link/comments/11f6cedb694456

Statically Typed Links

pathpidaの代替となる

https://nextjs.org/docs/app/building-your-application/configuring/typescript#statically-typed-links

Q: <Link href={href}>link</Link> のhrefにstring型を渡せなくなるが、型定義はどうすれば良い？

以下のようにやる(ドキュメントから引用)

import type { Route } from 'next';
import Link from 'next/link';
 
function Card<T extends string>({ href }: { href: Route<T> | URL })
  return (
    <Link href={href}>
      <div>My Card</div>
    </Link>
  );
}

Q: CIで型がないと怒られるのでビルドがしたいけど、全体のビルドは時間がかかるので型だけビルドしたい

discussionで相談中: https://github.com/vercel/next.js/discussions/50888

データフェッチ

Server Component

• 単純にasync/awaitを使えばよい
  • https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#async-and-await-in-server-components
  • ただ、TypeScript使用時にasync/awaitを使ってしまうとコンポーネントの返り値は Promise<JSX.Element> になってしまい、JSX.Elementではないよとコンパイルエラーになってしまう。これはアップストリームで修正に取り組んでおり、現在はts-expect-errorで無視する必要がある
    • TS5.1.2で解決された: [react] Allow returning ReactNode from function components by eps1lon · Pull Request #65135 · DefinitelyTyped/DefinitelyTyped
• Next.jsによるfetch()の上書きについて

dynamic routingでのエラーページ表示について

• server component内で notFound() を呼べば良い
  • Routing: Custom Errors | Next.js

bundle sizeについて

• Q: server componentだけにすればbundle sizeは0に近づけられるのでは？と思っていたけど意外とfirst load jsがあるけどなぜ？

Layout

Q: Layoutのネストはどのように反映される？

A: RootLayout → NestedLayout → Component のようにラップされる