React新手求助：Next.js中useEffect需在客户端组件使用的问题

问题原因 #

Next.js 13+的App Router模式下，组件默认是服务器组件，服务器组件无法使用useState、useEffect这类依赖浏览器环境的React Hooks，所以你的NavBar组件因为使用了useEffect才会触发这个错误。

解决步骤 #

1. 标记组件为客户端组件：在NavBar组件文件的最顶部添加'use client'指令，这是Next.js识别客户端组件的核心标识。
2. 修正Image组件路径：Next.js的静态资源需放在public目录下，图片路径要改为绝对路径格式，同时补充width和height属性（Next.js的强制要求，避免布局偏移）。

修改后的NavBar组件代码 #

'use client'; // 关键：添加这行标记为客户端组件
import React, { useState, useEffect } from "react";
import Image from 'next/image';
import styles from '../page.module.css';

export function NavBar() {
    const [isAll, setIsAll] = useState(true);
    const [isScrolled, setIsScrolled] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            const isTop = window.scrollY < 100;
            setIsAll(isTop);
            setIsScrolled(!isTop);
        };
        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    }, []);

    const toggleNavBar = () => {
        setIsAll(!isAll);
    }

    return (
        <nav className={`navbar ${isAll ? 'open' : ''} ${isScrolled ? 'scrolled' : ''}`}>
            <div className="navbar-toggle" onClick={toggleNavBar}>
                <span>
                    {/* 假设图片放在public/images/Theme.png，使用绝对路径 */}
                    <Image src="/images/Theme.png" alt="Logo" width={40} height={40} />
                </span>
                <span>Yvan KERDANET</span>
            </div>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Projets</a></li>
                <li><a href="#">A propos de moi</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    )
}

补充说明 #

• 'use client'必须放在组件文件的最顶部，不能在任何导入语句之后。
• page.tsx无需修改，它作为服务器组件可以正常导入并渲染客户端组件。

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