Next.js AppRouterにて動的ページをビルドする（SSG)

2024-05-13

はじめに

Next.js13.4の新機能でApp Routerが追加されました。
ファイルシステムベースのRouterのことで、Server Componentなど新機能に対応しています。

AppRouterでは、すべてのコンポーネントがServer Componentになったことから、Client Componentとして利用する場合、ファイルの先頭に"use client"をつける必要があります。

これまで、Next.jsのレンダリングは、SSR（サーバーサイドレンダリング）とSSG（Static Site Generator）が使用されることが一般的でしたが、アップデートにより、ますますSSRファーストなフレームワークになってきています。

SSGの場合、SSRとして開発をしてビルドすると、動的ページでエラーが発生します。アップデート以前の話でもありますが、動的ページ処理は、getServerSidePropsやgetStaticPropsを使用していました。ただ、今回のアップデートにより、それらが廃止されました。

実装しようものなら、以下のようなエラーが発生します。

"getStaticProps" is not supported in app/

そして新たに、generateStaticParams が追加されました。基本的に generateStaticParams を使用して動的ページを生成していきます。

以下も generateStaticParams を使用して実装します。

環境

Next.js：14.0.4

generateStaticParamsを使って動的ページを作成

データの作成

ファイル: src/constant/item.ts

type ItemsType = {
  id: number,
  name: string
}

export const Items: ItemsType[] = [
  {
    id: 1,
    name: "あめ"
  },
  {
    id: 2,
    name: "めだか"
  }
];

動的ページの作成

ファイル: src/app/item/[id]/page.tsx

import { NextPage } from 'next';
import { Items } from '@/constant/items';

type Props = {
  params: {
    id: number;
  };
};

const DynamicView: NextPage<Props> = (props) => {
  const item = Items.filter(item => item.id == props.params.id)[0];
  return (
    <>
      {item.name}
    </>
  );
};

export default DynamicView;

export const generateStaticParams = async () => {
  const paths = Items.map((item) => ({
    params: { id: item.id.toString() }
  }));
  return paths.map((post) => post.params);
};

generateStaticParams において、ビルド時に動的ページを静的にルートを生成します。
localhost:3000/item/1、item/2 が生成され、それぞれのURLでアクセスすると、ビューには 1 のとき「あめ」、2 のとき「めだか」が表示されます。

おわりに

Remixも然り、基調SSRを使用しフロントエンドからバックエンドまでカバーし、ノンストップでスピーディーに開発できるFWが主流となっています。

また、クライアントのスペックに依存せず、サーバのスケーリングによって対応できるのが魅力的です。

SSRに対応している他言語のバックエンドもあるものの、主流はNode.jsでしょう。
レンタルサーバのような環境であればNode.jsを動かすのは厳しく、SSGが使われることもまだまだ多くあるでしょう。

私も基本SSGで開発をしておりましたが、今後、リアルタイム性の求められるサービスも作成したいので、近いうちにSSRにもチャレンジをしてみたいです。