Next.jsのルーティングをApp Routerに移行した

---

このサイトで使っているNext.jsのバージョンをv13に更新し、App Routerという新しいルーティングシステムに移行した。移行時に行なったことをメモしておく。

Next.js公式の移行ガイドがあるのでこれに従う。

_app.tsxの内容はルートのlayout.tsxに、その他のファイルの内容はディレクトリごとのpage.tsxに置く。

v12まではnext/headのHeadコンポーネントでメタデータを設定していたが、v13からはMetadataオブジェクトをexportすることでメタデータを設定する。

「ページのパスを取得してHeadコンポーネントを動的に生成する」みたいなことができない様子なのでちょっと困った。パスはある程度ハードコードしないといけないらしい。

// 本当はやりたかったこと
export const generateMetadata = () => {
  const url = getUrl();
  return {
    openGraph: {
      url: url
    }
  }
};

// 実際の実装イメージ
export const generateMetadata = () => {
  return {
    openGraph: {
      url: "https://www.a4rcvv.net/blog"
    }
  }
};

v12まではnext/routerのuseRouter()を使っていたが、v13からはnext/navigationのuseRouter(), usePathname(), useSearchParams()を使うことになる。

v12までのuseRouter()で取得できていたpathnameとqueryがそれぞれusePathname(), useSearchParams()に分離された形。

pagesディレクトリではgetServerSideProps()とgetStaticProps()をexportしていたが、appディレクトリではこのあたりの記述を全てPageコンポーネントに書けるようになった。

const Page = async ({ params }: { params: { tag: string } }) => {
  const tag = params.tag;
  const metadata = getMetadata();
  return <BlogTagView tag={tag} metadata={metadata} />;
};

また、getStaticPaths()はgenerateStaticParams()に置き換えられた。概ね同じようなAPIだが、戻り値の型が若干シンプルになっている。

export const generateStaticParams = () => {
  const ids = getAllPostIds().filter((id) => {
    return !getArticleMetadata(id).isDraft;
  });

  return ids.map((id) => {
    return {
      id: id,
    };
  });
};

MUIの公式ガイドを読むとThemeRegistryを実装すれば良いらしいことが分かるので、実装を追加した。

v12までは next build && next export で静的HTMLを生成していた。

v13では、next.config.jsに"output: export"を追加した上でnext buildだけを実行すれば良い。

参考: Deploying: Static Exports | Next.js

• Next.js13のApp Routerを試してみたぞ！
• Next.js 13のappディレクトリの基礎(Layout, Suspense, Data Fetching...) | アールエフェクト

---