Mjeld Technologies

1. 「/#/」とは？ハッシュルーティングの基本

ブラウザURLで見かける /#/ は、「ハッシュルーティング（Hash Routing）」と呼ばれる仕組みです。 これはシングルページアプリケーション（SPA）で、ページ遷移をクライアント側のみで制御するために使われます。

例えば https://mjeld.com/#/user/123 のようなURLでは、#以降の部分はサーバーには送信されません。 そのためサーバー設定を触らなくても、フロントエンドだけでルートを切り替えられるという利点があります。

2. Next.jsでハッシュルーティングを実装する

Next.jsは通常「ファイルベースルーティング（/pages や /app ディレクトリ）」を採用していますが、 どうしても /hash スタイルを使いたい場合は、クライアント側で window.location.hash を監視してルーティング処理を行います。

実装例（app/page.tsx）

'use client';

import { useEffect, useMemo, useState } from 'react';

type Route = { name: string; param?: string };

function parseHash(hash: string): Route {
  // 例: #/ , #/about , #/user/123
  const raw = hash.startsWith('#') ? hash.slice(1) : hash;
  const path = raw.replace(/^\/+/, ''); // 先頭の / を除去
  const seg = path.split('/').filter(Boolean);

  if (seg.length === 0) return { name: 'home' };
  if (seg[0] === 'about') return { name: 'about' };
  if (seg[0] === 'user' && seg[1]) return { name: 'user', param: seg[1] };
  return { name: 'notfound' };
}

export default function Page() {
  const [hash, setHash] = useState<string>(typeof window !== 'undefined' ? window.location.hash : '#/');

  useEffect(() => {
    const onChange = () => setHash(window.location.hash || '#/');
    window.addEventListener('hashchange', onChange);
    return () => window.removeEventListener('hashchange', onChange);
  }, []);

  const route = useMemo(() => parseHash(hash), [hash]);

  return (
    <main className="max-w-2xl mx-auto p-6 space-y-6">
      <nav className="flex gap-3">
        <a href="#/">Home</a>
        <a href="#/about">About</a>
        <a href="#/user/123">User 123</a>
      </nav>

      {route.name === 'home' && <h1 className="text-2xl font-bold">Home</h1>}
      {route.name === 'about' && <h1 className="text-2xl font-bold">About</h1>}
      {route.name === 'user' && (
        <section>
          <h1 className="text-2xl font-bold">User</h1>
          <p>ID: {route.param}</p>
        </section>
      )}
      {route.name === 'notfound' && <p>Not Found</p>}
    </main>
  );
}

このコードでは、hashchangeイベントを利用して#以降の変化を検知し、 表示するコンポーネントを切り替えています。

3. ハッシュルーティングを使うメリット・デメリット

項目	メリット	デメリット
設定の手軽さ	サーバー設定不要でSPA動作可	–
404対策	リロードしても404にならない	–
SEO	–	検索エンジンは#以降を無視しがち
URLの見た目	–	古い設計に見えることがある

4. Next.jsでおすすめのルーティング方法

もしサーバー側（Vercel・Amplify・Cloudflare Pagesなど）でリライト設定が可能なら、 ハッシュ方式ではなく通常の/users/123形式を推奨します。

PowerShellでNode.jsの最新バージョン一覧を確認する方法【Volta／Windows対応】

Next.jsでbasePathを/homepage2にしてS3へ静的デプロイする完全手順

pnpmとは？npmとの違いとインストール方法

Next.jsのlayout.tsxで複数サイズのPNGファビコンを指定する方法

AWS Amplify CLIでS3やZIPから手動デプロイ【実行コマンド付き】