Next.js ブログをレスポンシブ対応 — ハンバーガーメニューとモバイル最適化

import type { Viewport } from "next";
 
export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 5,
};

"use client";
 
import { useState, useEffect } from "react";
import Link from "next/link";
import type { Dictionary, Locale } from "@/lib/i18n";
import { ThemeToggle } from "@/components/theme/theme-toggle";
import { LanguageSwitcher } from "@/components/layout/language-switcher";
 
interface MobileNavProps {
  locale: Locale;
  t: Dictionary;
}
 
export function MobileNav({ locale, t }: MobileNavProps) {
  const [isOpen, setIsOpen] = useState(false);
 
  // Lock body scroll when open
  useEffect(() => {
    if (isOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
    return () => {
      document.body.style.overflow = "";
    };
  }, [isOpen]);
 
  // Close on Escape key
  useEffect(() => {
    if (!isOpen) return;
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") {
        setIsOpen(false);
      }
    }
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
  }, [isOpen]);
 
  // ...
}

<Link
  href={link.href}
  onClick={() => setIsOpen(false)}
>
  {link.label}
</Link>

<button
  aria-expanded={isOpen}
  aria-label={isOpen ? t.nav.closeMenu : t.nav.menu}
>

import { createPortal } from "react-dom";
 
export function MobileNav({ locale, t }: MobileNavProps) {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div className="md:hidden">
      <button
        className="relative z-50 inline-flex h-9 w-9 ..."
        aria-expanded={isOpen}
      >
        {/* ハンバーガーアイコン */}
      </button>
 
      {isOpen &&
        createPortal(
          <>
            <div
              className="fixed top-14 right-0 bottom-0 left-0 z-40 bg-black/50"
              onClick={() => setIsOpen(false)}
              aria-hidden="true"
            />
            <nav className="fixed top-14 right-0 bottom-0 z-50 w-3/4 max-w-xs bg-background p-6 shadow-xl">
              {/* メニュー内容 */}
            </nav>
          </>,
          document.body,
        )}
    </div>
  );
}

<nav className="hidden items-center gap-4 md:flex">
  {/* 既存のデスクトップナビ */}
</nav>
<MobileNav locale={locale} t={t} />

// Before
<div className="mx-auto max-w-3xl px-4 py-12">
 
// After
<div className="mx-auto max-w-3xl px-4 py-6 md:py-12">

.prose {
  & h1 {
    font-size: 1.625rem;
 
    @media (min-width: 768px) {
      font-size: 2rem;
    }
  }
 
  & h2 {
    font-size: 1.25rem;
    margin-top: 1.5rem;
 
    @media (min-width: 768px) {
      font-size: 1.5rem;
      margin-top: 2rem;
    }
  }
 
  & h3 {
    font-size: 1.125rem;
    margin-top: 1.25rem;
 
    @media (min-width: 768px) {
      font-size: 1.25rem;
      margin-top: 1.5rem;
    }
  }
}

// Before
"inline-flex h-9 w-9 ..."
 
// After
"inline-flex h-11 w-11 ... md:h-9 md:w-9"

// Before
"px-3 py-1.5"
 
// After
"px-4 py-2 md:px-3 md:py-1.5"

// Before
className="text-muted-foreground hover:text-foreground transition-colors"
 
// After
className="inline-flex h-11 w-11 items-center justify-center text-muted-foreground hover:text-foreground transition-colors md:h-auto md:w-auto"

// Before
<div className="flex items-center gap-3">
 
// After
<div className="flex flex-wrap items-center gap-2 md:gap-3">

describe("MobileNav", () => {
  it("renders hamburger button");
  it("hamburger button has aria-expanded=false initially");
  it("opens drawer on click and sets aria-expanded=true");
  it("shows nav links when drawer is open");
  it("nav links have correct hrefs for en locale");
  it("nav links have correct hrefs for ja locale");
  it("closes drawer on Escape key");
  it("locks body scroll when open");
  it("unlocks body scroll when closed");
});

test.use({ viewport: { width: 375, height: 667 } });
 
test.describe("Mobile Navigation", () => {
  test("hamburger menu is visible on mobile");
  test("desktop nav is hidden on mobile");
  test("opens drawer and shows nav links");
  test("navigates to blog via mobile menu");
  test("drawer closes after navigation");
  test("closes drawer with Escape key");
  test("closes drawer when clicking overlay");
  test("Japanese locale mobile menu");
});

projects: [
  {
    name: "chromium",
    use: { ...devices["Desktop Chrome"] },
  },
  {
    name: "mobile-chrome",
    use: { ...devices["Pixel 5"] },
    testMatch: "mobile-*.spec.ts",
  },
],