HonoX で Next.js PagesRouter の getStaticPaths をしたい

みなさん、HonoX はお使いでしょうか？

HonoX は、手軽に SSR（Server-Side Rendering）や Island Architecture を試せる優秀なパッケージです。シンプルな API で現代的な Web アプリケーションを構築できるのが魅力ですね。

Next.js の getStaticPaths とは

Next.js の Pages Router には getStaticPaths という便利な機能があります。これは、動的ルートに対して事前に描画しておきたいパスを返すことで、Static Site Generation（SSG）を実現する仕組みです。

例えば、ブログの記事ページのように [slug] のような動的なパラメータを持つページでも、事前にどの slug の記事を生成するかを指定できます。

HonoX で同様の機能を実現するには

では、HonoX で同じことを実現するにはどうすればよいのでしょうか？実は、Hono に搭載されている SSG Helper の ssgParams と組み合わせることで実装することができます。詳細は Hono の公式ドキュメントを参照してください。

具体的な実装方法

HonoX の createRoute の第一引数に ssgParams を渡してあげることで、Next.js の getStaticPaths と同様の機能を実現できます。

// routes/posts/[slug].tsx
import React from "hono/jsx";
import { createRoute } from "honox/factory";
import { ssgParams } from "hono/ssg";

export default createRoute(
  ssgParams(async () => {
    // 事前に生成したいパラメータの配列を返す
    return [
      { slug: "first-post" },
      { slug: "second-post" },
      { slug: "third-post" }
    ];
  }),
  (c) => {
    const { slug } = c.req.param();
    
    return c.render(
      <div>
        <h1>記事: {slug}</h1>
        <p>この記事は事前に生成されました。</p>
      </div>
    );
  }
);