Next.jsにおけるレスポンシブ実装とちらつき対策

2025年2月16日

はじめに

Next.jsでレスポンシブ対応を実装する際、SSRやSSGの特性により初期レンダリング時にちらつきが発生することがあります。今回は、その問題の解決方法と実装のベストプラクティスについて解説します。

レスポンシブ実装の2つのアプローチ

1. CSS Media Queryによる実装

最もシンプルで効率的なアプローチは、CSS Media Queryを使用することです。

@media screen and (min-width: 1024px) {
  /* PC向けスタイル */
  .container {
    padding: 20px;
  }
}

@media screen and (max-width: 1023px) {
  /* スマートフォン向けスタイル */
  .container {
    padding: 10px;
  }
}

このアプローチのメリット：

DOMツリーの構造変更を伴わないため、パフォーマンスが良い
SSR/SSG時にもスタイルが適用される
実装がシンプル

2. useMediaQueryによるコンポーネント切り替え

より複雑なレイアウトの切り替えが必要な場合は、useMediaQueryを使用します。

interface Props {
  sp: React.ReactElement;
  pc: React.ReactElement;
  initial?: "sp" | "pc" | "none";
}

function Switcher({ pc, sp, initial = "sp" }: Props): React.ReactElement {
  const displaySP = useMediaQuery("(max-width: 1023px)");
  const displayPC = useMediaQuery("(min-width: 1024px)");
  
  if (displaySP) return sp;
  if (displayPC) return pc;
  if (initial === "sp") return sp;
  if (initial === "pc") return pc;
  return <></>;
}

ちらつき防止の実装ポイント

1. 初期表示の制御

SSR/SSG時のちらつきを防ぐために、以下の点に注意が必要です：

initialプロパティで初期表示するコンテンツを制御
SEO考慮が必要な場合は適切な初期値を設定
ちらつきを完全に防ぎたい場合はinitial="none"を使用

2. コンポーネントの使い分け

// 使用例
return (
  <Switcher
    sp={<MobileComponent />}
    pc={<DesktopComponent />}
    initial="none"
  />
);

実装時の注意点

できるだけCSS Media Queryを優先する
- スタイルの変更のみの場合はCSS Media Queryを使用
- コンポーネントの切り替えが必要な場合のみuseMediaQueryを使用
SEOへの配慮
- 重要なコンテンツは初期レンダリング時に表示されるよう設定
- 非表示要素のSEOへの影響を考慮
パフォーマンスの最適化
- 不要なコンポーネントの描画を避ける
- レンダリングのちらつきを最小限に抑える