Next.js响应式布局优化：解决累积布局偏移问题

你的问题核心在于初始渲染时窗口尺寸未就绪，导致样式延迟更新引发布局偏移：自定义UseDimensions Hook初始返回width: undefined，此时内层容器的padding会先匹配默认的大屏幕样式，等useEffect执行后才更新为对应屏幕尺寸的样式，这就造成了布局跳动。

以下是几种更优的替代方案：

方案1：CSS媒体查询（最推荐，无JS依赖） #

直接用CSS实现响应式样式，浏览器会在渲染阶段直接应用匹配屏幕尺寸的规则，彻底避免JS延迟带来的CLS。

示例：使用CSS模块 #

/* Container.module.css */
.outerContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.innerContainer {
  width: 100%;
  max-width: 2000px;
  /* 默认大屏幕 padding */
  padding: var(--padding-vert, 4rem) 8rem;
}

/* 匹配md断点以下 */
@media (max-width: 767px) {
  .innerContainer {
    padding: var(--padding-vert, 4rem) 4rem;
  }
}

/* 匹配sm断点以下 */
@media (max-width: 639px) {
  .innerContainer {
    padding: var(--padding-vert, 4rem) 2rem;
  }
}

组件代码 #

import styles from './Container.module.css';

export default function Container(props) {
  return (
    <div
      className={styles.outerContainer}
      style={{ backgroundColor: props.backgroundColor, ...props.style }}
      id={props.id}
    >
      <div
        className={styles.innerContainer}
        style={{
          // 自定义垂直内边距
          '--padding-vert': props.paddingVert,
          // 优先使用传入的padding
          ...(props.padding && { padding: props.padding }),
          ...props.innerStyle,
        }}
      >
        {props.children}
      </div>
    </div>
  );
}

这种方案完全依赖CSS，性能最优，同时支持SSR/SSG，没有Hydration不匹配问题。

方案2：使用useMediaQuery（需JS控制时） #

如果必须用JS处理响应式逻辑，可封装useMediaQuery Hook，确保初始渲染时就能获取正确的匹配结果：

自定义useMediaQuery Hook #

import { useState, useEffect } from 'react';

export function useMediaQuery(query) {
  // 初始匹配结果：客户端直接获取，服务端默认false
  const [matches, setMatches] = useState(
    typeof window !== 'undefined' ? window.matchMedia(query).matches : false
  );

  useEffect(() => {
    const media = window.matchMedia(query);
    const updateMatches = () => setMatches(media.matches);
    
    updateMatches();
    media.addEventListener('change', updateMatches);
    
    return () => media.removeEventListener('change', updateMatches);
  }, [query]);

  return matches;
}

组件中使用 #

import { useMediaQuery } from '../hooks/useMediaQuery';
import Breakpoints from '../../styles/Breakpoints';

export default function Container(props) {
  const isSmScreen = useMediaQuery(`(max-width: ${Breakpoints.sm - 1}px)`);
  const isMdScreen = useMediaQuery(`(max-width: ${Breakpoints.md - 1}px)`);

  const padding = props.padding ?? (
    isSmScreen
      ? `${props.paddingVert ?? "4rem"} 2rem`
      : isMdScreen
      ? `${props.paddingVert ?? "4rem"} 4rem`
      : `${props.paddingVert ?? "4rem"} 8rem`
  );

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        backgroundColor: props.backgroundColor,
        width: "100%",
        ...props.style,
      }}
      id={props.id}
    >
      <div
        style={{
          padding,
          width: "100%",
          maxWidth: 2000,
          ...props.innerStyle,
        }}
      >
        {props.children}
      </div>
    </div>
  );
}

注意事项

如果使用SSR/SSG，需用dynamic禁用组件的服务端渲染，避免Hydration不匹配：

import dynamic from 'next/dynamic';

const Container = dynamic(() => import('./Container'), { ssr: false });

export default Container;

方案3：优化原有UseDimensions Hook #

若想保留原有Hook，需给初始尺寸设置合理默认值，避免undefined导致的样式突变：

import * as React from "react";
import Breakpoints from "../styles/Breakpoints";

export default function UseDimensions() {
  // 客户端初始直接获取尺寸，服务端用默认断点值
  const [windowSize, setWindowSize] = React.useState({
    width: typeof window !== "undefined" ? window.innerWidth : Breakpoints.md,
    height: typeof window !== "undefined" ? window.innerHeight : undefined,
  });

  React.useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowSize;
}

这种方案仍可能存在SSR与客户端样式不匹配的问题，仅作为过渡方案使用。

内容的提问来源于stack exchange，提问作者Thom Crielaard