client_side_fuga_page.tsx

'use client'

import { usePathname } from 'next/navigation'

export default function FugaPage() {
  const pathname = usePathname()
  const isHoge = pathname.includes('/hoge')

  return (
    <div>
      <h1>Fuga Page (Client Side)</h1>
      <p>現在のパス: {pathname}</p>
      <p>判定結果: {isHoge ? 'hogeです' : 'hogeではありません'}</p>
    </div>
  )
}

client_side_hoge.tsx

'use client'

import { usePathname } from 'next/navigation'

export default function HogePage() {
  const pathname = usePathname()
  const isHoge = pathname.includes('/hoge')

  return (
    <div>
      <h1>Hoge Page (Client Side)</h1>
      <p>現在のパス: {pathname}</p>
      <p>判定結果: {isHoge ? 'hogeです' : 'hogeではありません'}</p>
    </div>
  )
}

middleware.ts

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(request: NextRequest) {
  /* 
  src/をエイリアスにしている場合、middleware.tsを配置する場所はプロジェクトルートではなくsrc/直下にする必要がある
   */
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set("x-pathname", request.nextUrl.pathname);

  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
}

export const config = {
  matcher: "/((?!api|_next/static|_next/image|favicon.ico).*)",
};

server_side_fuga_page.tsx

import { headers } from "next/headers";

export default async function FugaPage() {
  const headersList = await headers();
  const pathname = headersList.get("x-pathname") || "";

  const isHoge = pathname.includes("/hoge");

  return (
    <div>
      <h1>Fuga Page</h1>
      <p>現在のパス: {pathname}</p>
      <p>判定結果: {isHoge ? "hogeです" : "hogeではありません"}</p>
    </div>
  );
}

server_side_hoge_page.tsx

import { headers } from "next/headers";

export default async function HogePage() {
  const headersList = await headers();
  const pathname = headersList.get("x-pathname") || "";

  const isHoge = pathname.includes("/hoge");

  return (
    <div>
      <h1>Hoge Page (Server Side)</h1>
      <p>現在のパス: {pathname}</p>
      <p>判定結果: {isHoge ? "hogeです" : "hogeではありません"}</p>
    </div>
  );
}