Next.jsにおけるsuppressHydrationWarning: 安全な利用法とデバッグの完全ガイド

Warning: Prop `className` did not match. Server: "foo" Client: "bar"
Warning: Text content did not match. Server: "Hello" Client: "World"
Warning: Expected server HTML to contain a matching <tag> in <parent>.

<div suppressHydrationWarning={true}>
  {/* Content that might cause a hydration mismatch */}
</div>

// components/LoginForm.tsx
export default function LoginForm() {
  return (
    <form>
      <label htmlFor="username">Username</label>
      <input type="text" id="username" name="username" />
      <label htmlFor="password">Password</label>
      {/* Browser extensions might inject elements here */}
      <input type="password" id="password" name="password" suppressHydrationWarning />
      <button type="submit">Login</button>
    </form>
  );
}

// components/TimestampDisplay.tsx
'use client'; // This component needs client-side execution for accurate local time

import { useEffect, useState } from 'react';

interface TimestampDisplayProps {
  isoString: string; // ISO string from server
}

export default function TimestampDisplay({ isoString }: TimestampDisplayProps) {
  const [displayTime, setDisplayTime] = useState('');

  // Option 1: Use useEffect to ensure client-side rendering only
  // This is generally preferred for complex client-side logic
  useEffect(() => {
    const date = new Date(isoString);
    setDisplayTime(date.toLocaleString());
  }, [isoString]);

  // Option 2: Use suppressHydrationWarning for simple cases where initial mismatch is acceptable
  // The server might render a different locale/timezone, but the client will quickly correct it.
  // This is applied to the element whose content might differ.
  const initialDate = new Date(isoString);
  const serverRenderedTime = initialDate.toLocaleString(); // This will be based on server's locale/timezone

  return (
    <div>
      <p>
        Last updated (Client-side useEffect): {displayTime}
      </p>
      <p suppressHydrationWarning>
        Last updated (suppressHydrationWarning): {serverRenderedTime}
      </p>
    </div>
  );
}

// Usage in a Server Component or Page:
// import TimestampDisplay from '@/components/TimestampDisplay';
// export default function MyPage() {
//   const serverTime = new Date().toISOString();
//   return <TimestampDisplay isoString={serverTime} />;
// }

// components/ThemeSwitcher.tsx
'use client';

import { useState, useEffect } from 'react';

type Theme = 'light' | 'dark';

export default function ThemeSwitcher() {
  const [theme, setTheme] = useState<Theme | null>(null); // Start with null to indicate unknown theme

  useEffect(() => {
    // This runs only on the client
    const storedTheme = localStorage.getItem('theme') as Theme || 'light';
    setTheme(storedTheme);
    document.documentElement.setAttribute('data-theme', storedTheme);
  }, []);

  const toggleTheme = () => {
    setTheme(prevTheme => {
      const newTheme = prevTheme === 'light' ? 'dark' : 'light';
      localStorage.setItem('theme', newTheme);
      document.documentElement.setAttribute('data-theme', newTheme);
      return newTheme;
    });
  };

  // Render a placeholder or null until theme is known client-side
  if (theme === null) {
    return <div suppressHydrationWarning style={{ visibility: 'hidden' }}>Loading theme...</div>;
  }

  return (
    <button onClick={toggleTheme} suppressHydrationWarning>
      Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode
    </button>
  );
}

// components/UniqueIdComponent.tsx
'use client';

import { useState, useEffect } from 'react';

let globalIdCounter = 0; // Not ideal for production, but demonstrates the concept

function generateUniqueId() {
  globalIdCounter += 1;
  return `client-id-${globalIdCounter}`;
}

export default function UniqueIdComponent() {
  const [id,