tauri × Next.jsのデスクトップアプリでAPPRouterのDynamic Routesが使えなかった話

はしめに

個人開発として最近、デスクトップアプリのフレームワークでTauriでの開発を行っていた時の話です。
フロントエンドに触ったことがあるNext.jsが使えるとのことで、やってみようと思いNext.jsのバージョン13から導入されたルーティングシステムAPPRouterを使って開発をしていました。

起こったこと

APPRouterではパスパラメータの場合にpost/[slug]のようなディレクトリにするとslugがパスパラメータとして取得できるのでそれを利用した開発を行っていました。
開発環境での実行コマンドであるtauri devで実行しても正常に動作するため問題なく実装できているものと思っていました。
しかし、いざビルドしてみると。。。

下記のようなエラーが発生！！

Error: Page "/post/[slug]" is missing "generateStaticParams()" so it cannot be used with "output: export" config.

よくよく見てみると静的エクスポートを利用しているときにはgenerateStaticParamsを利用してビルド時にパラメータに設定する変数をあらかじめ取得して、静的パラメータの生成を行う必要があった（実行時にエラーはいてくれよ！！）
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes#generating-static-params

解決した方法

generateStaticParamsを実装していくのは面倒だったのでパスパラメータからクエリパラメータにしたら可能なのでは？と思いパスパラメータからクエリパラメータへの変更を行いました。
今回はnext/navigationにあるuseSearchParamsを利用してクエリパラメータを取得しました

"use client";

import { useSearchParams } from "next/navigation";
import Link from "next/link";

export default function Home() {
  const param = useSearchParams();
  const slug = param.get("slug");

  return <Link href={/post?slug=${slug}} >次のページへ</Link>;
}

上記の修正＋[slug]となっていたディレクトリ構成を変更してやっと意図した挙動が実装できました。