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対応】
