Next.jsを使って、さまざまなサブドメインを運用しつつ、サブドメインのときには専用のサブディレクトリにアクセスさせたいときの方法です。ちょっと分かりにくいですね。
- example.com : 普通のアクセスとして扱う
- user1.example.com :
/subdomain/[user]以下のパスをルートにする
こういうことをやりたいということです。
middleware.tsを使う
next.config.js でrewriteする方法もあるのですが、条件分岐などをしようと思うと素直にmiddleware.tsで実現するのが良いです。
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
const HOST = "example.com:3000";
export function middleware(request: NextRequest) {
const host = request.headers.get("host");
const { pathname } = new URL(request.url);
if (host?.endsWith(`.${HOST}`) && !pathname.startsWith("/_next")) {
const subdomain = host.replace(`.${HOST}`, "");
return NextResponse.rewrite(
new URL(`/subdomain/${subdomain}${pathname}`, request.url),
);
}
return NextResponse.next();
}
export const config = { matcher: "/((?!.*\\.).*)" };
リクエストしてきたホスト名を参照し .example.com:3000 で終わる場合はサブドメイン付きのアクセスと判定します。そしてサブドメインを抜き出して /subdomain/user1 にrewriteしてあげます。以降のパスも継承するようにpathnameも付けておきます。これだけです。
静的なアセットファイル（CSSやJS・画像など）はrewriteしたくないので2つ条件をつけています。 /_next 始まりのパスと、config のマッチャーでpublicディレクトリにあるような画像ファイルなどを除外しています。
たぶんこれで問題なくサブドメインの運用ができるでしょう。たぶん。きっと。
Discussion