2023/05/13

Next.js: From Pages to App

Next.js で app directory が stable になったので移行してみた。

最初

これを見て usePathname() してパスを分割しないといけないのかなと思っていたが、

上記ページを見て page.tsx のデフォルトエクスポートしている関数が引数でパスパラメータを受け取れることを把握した。

type PageProps = {
  params: { blogKey: string }
}

export default function Page({ params }: PageProps) {
  const blogKey = params.blogKey
  // 以下略
}

こんな感じでいける。

公式のマイグレーションガイドには pages directory で使っていた next/head は built-in SEO support に変更しろと書いてある。

しかしその built-in SEO support というのはサーバーコンポーネントからしか使えない。そしてクライアントコンポーネントからページタイトル等を編集するにはどうすればいいかという情報がドキュメントを探しても見つからない。

ドキュメントを拡充してくれという issue もあった。

私はどうしてもユーザーの認証状態を使って取得したデータを元にページタイトルを編集したかったので、あれこれ探して Next.js の API は無いということを確信した後で原始的に document.title を直接いじることにした。

useEffect(() => {
if (data.name) {
    document.title = data.name
}
}, [data.name])

ただ page directory ではできていたことは、app directory でもできるようにしておいてほしい感がある。

issue を漁ったけど自分のソースコードに適用できる解決策が見つからなかった。

特に特定のページのコンパイルがはちゃめちゃに遅くて初回画面遷移時にはフリーズしたかと思うほどだし、時々本当にフリーズするのでどうにか直ってほしい。

Chakra UI を使っている都合で基本的にクライアントコンポーネントにせざるを得ないし、コンパイルがはちゃめちゃに遅い問題がくっついてきたので、正直 app directory にはしなくてよかったと思う。

サーバーコンポーネントを活用する予定がないなら現状ではまだ pages directory のままのほうが良さそう。

以上