【Next.js】rewrite機能を使ってルーティングを考える

Next.js（< 13）で次のようなルーティングを行いたい

• /a-Japanでアクセスされたらlocale=en、country=Japanとしてパラメータを受け取る
• /ja/a-Japanでアクセスされたらlocale=ja、country=Japanとしてパラメータを受け取る
• /a-Japan/a-Tokyoでアクセスされたらlocale=en、country=Japan、city=Tokyoとしてパラメータを受け取る
• /ja/a-Japan/a-Tokyoでアクセスされたらlocale=ja、country=Japan、city=Tokyoとしてパラメータを受け取る
• /a-Japan/s-Tokyoでアクセスされたらlocale=en、country=Japan、station=Tokyoとしてパラメータを受け取る
• /ja/a-Japan/s-Tokyoでアクセスされたらlocale=ja、country=Japan、station=Tokyoとしてパラメータを受け取る

上記はすべて同じページで異なるパラメータを使って取得するデータを変える

いろいろ調べたがよい方法が見つからなかったので独自に考えた

パスの最初の階層によるlocaleの取得は、いわゆる国際化対応でNext.jsでは標準対応しているため簡単にできる

nextjs.org

次にcountryやcity、stationであるが、これはrewrites機能を使った

nextjs.org

/pages/areaを作成し、

• /a-Japanでアクセスされたら/area?country=a-Japanになるように
• /a-Japan/a-Tokyoでアクセスされたら/area?country=a-Japan&city=a-Tokyoになるように
• /a-Japan/s-Tokyoでアクセスされたら/area?country=a-Japan&station=s-Tokyoになるように

こうなるように、next.config.jsにrewrite設定をした

  async rewrites() {
    return [
      {
        source: "/:country(a-[A-Z]+[a-zA-Z-]*)/:city(a-[A-Z]+[a-zA-Z-]*)",
        destination: "/area?country=:country&city=:city"
      },
      {
        source: "/:country(a-[A-Z]+[a-zA-Z-]*)/:station(s-[A-Z]+[a-zA-Z-]*)",
        destination: "/area?country=:country&station=:station"
      },
      {
        source: "/:country(a-[A-Z]+[a-zA-Z-]*)",
        destination: "/area?country=:country"
      }
  }

あとはgSSPでa-などのプレフィックスを処理することで、やりたいルーティングにすることができた