Next.js项目使用classnames包时出现Prop className不匹配警告

问题根源 #

这个报错和classnames本身没有关联，是Next.js水合（Hydration）阶段的常见问题：

• Next.js服务端渲染（SSR/SSG）阶段无法获取客户端当前的真实路由路径，router.asPath在服务端执行时的取值和客户端hydrate时的实际取值不一致，导致服务端输出的className只有基础类，客户端初始渲染时多了激活态类，两边属性不匹配触发警告。

修复方案 #

利用Next.js路由对象的isReady属性判断路由是否在客户端完成初始化，只有初始化完成后再执行激活态判断，保证服务端和客户端首次渲染输出的内容完全一致：

{Links.map((link, i) => {
    // 仅客户端路由初始化完成后才判断激活状态
    const isActive = router.isReady && router.asPath === link.path
    return (
        <li
            key={i}
            className={cx(
                styles.nav__item,
                isActive && styles.nav__itemActive
            )}
        >
            <Link href={link.path}>{link.name}</Link>
        </li>
    );
})}

如果是Next.js 13+ App Router版本，使用usePathname钩子替代router.asPath即可，对应组件顶部需要添加'use client'标记。

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