Next.js の App Router で Route Groupsを使ってサイトを2つに分ける

スタジオ・アルカナのマークアップエンジニアの野間です。
今年度は Next.js のSSG案件に何度か関わりました。その中で1つの環境の中にデザインのベースの違う2つのサイトを同居させるというものがあり、それを Route Groups で実現し、とても効率的な良い方法を選択したなと思ったので、それについて書こうと思います。

Route Groups の公式ドキュメントはこちら https://nextjs.org/docs/app/api-reference/file-conventions/route-groups

Route Groups を選択した経緯

この案件についてもう少し具体的に説明すると、弊社のグループ内の会社のサイトのリニューアル案件で、サービスサイトをルートに入れて、/company/ というサブディレクトリにコーポレートサイトを入れる、というものでした。

最初は普通に1つのサイトとして作って /company/ 配下だけ違うコンポーネントを読み込んでデザインを変えようと思っていました。でも、進めようとしたところいきなり問題が出てきました。どういう問題かと言うと、body に背景色やフォントのスタイル当てたいけど、body は共通の app 直下の layout.tsx で管理されているというものです。できるだけ共通部分はシンプルに管理したい。そうすると各 page.tsx でスタイルを分けるための記述が増える。美しくない。

何とか筋の通ったシンプルな形にしようと、あれこれ調べて見つかったのが Route Groups を使う方法でした。Route Groups を使ってサイトを分けると、それぞれに対して html や body や metaタグのベースが含まれた layout.tsx を設けられることが分かりました。これなら meta タグのテンプレートもそれぞれのサイトに合わせたものにできます。そもそも実質別サイトなのです。別で管理できたほうが良いに決まっています。

この方法を見つけた時は興奮しました。 何と言うことでしょう！家で例えると玄関やキッチンやお風呂は分かれているけど別棟で並立するいわば二世帯住宅ではないでしょうか！！！ 一定の独立性を保ったまま将来の介護、ではなくサイトメンテナンスができるのは運用面を考慮してもプラスと言えそうです。

具体的な方法

具体的な方法は、分けるサイトに便宜的に名前をつけ、() で囲んで分けるだけです。 使用したNext.jsのバージョンは15.3.3、App Router です。

() で囲んだものはディレクトリと見なされません。今回のサービスサイトをルートに入れて、/company/ というサブディレクトリにコーポレートサイトを入れる場合だと以下のような構成になりました。
※ src と同ディレクトリのファイルなど、説明に関係のないファイルは省略しています。

あとは、各layout.tsxにそれぞれのサイト用の記述をします。

サブディレクトリに入れる方のog:image のパスは注意

サブディレクトリに入れる方の og:image の設定ですが、 metadataBase をサブディレクトリなしで指定しないと、パスが https://ドメイン/サブディレクトリ/サブディレクトリ/opengraph-image.png みたいな感じにサブディレクトリが2つ連なる形で出力されて表示されなくなってしまいます。metadataBase にはサブディレクトリなしのurlを！

最後に

今回は Next.js の Route Groups をご紹介しました。 ところで皆さんは、route の読み方は「ラウト」派ですか？「ルート」派ですか？どちらでも良いと思うのですが、口に出す時はどう言うか迷います。「ルート」だと root と概念が混じってしまうので、私は頭の中では「ラウト」と呼んでいますが、その場のマジョリティが「ルート」派だと「ルート」と言ったりもします。

話は逸れてしまいましたが、最後にこの記事が二世帯住宅的な要件に取り組まれている方の一助になれば幸いです！