Next.js项目中use client使用错误及useState报错解决

问题原因 #

你遇到的错误核心是**'use client'指令位置错误**。Next.js要求这个特殊指令必须是文件的第一行有效代码（注释除外），才能将组件标记为客户端组件，从而允许使用useState、点击事件等客户端专属能力。你的代码中把它放在了图片import之后，导致指令未生效，组件仍被默认当作服务端组件，而服务端组件无法使用客户端钩子。

解决方案 #

将'use client'移到文件最顶部，所有import语句之前。修改后的完整代码如下：

'use client'
import Head from "next/head";
import {BsFillMoonStarsFill} from 'react-icons/bs';
import {AiFillGithub, AiFillLinkedin} from 'react-icons/ai';
import Image from "next/image";
import deved from "../public/dev-ed-wave.png";
import design from '../public/design.png';
import code from '../public/code.png';
import consulting from '../public/consulting.png';
import web1 from '../public/web1.png';
import web2 from '../public/web2.png';
import web3 from '../public/web3.png';
import web4 from '../public/web4.png';
import web5 from '../public/web5.png';
import web6 from '../public/web6.png';
import { useState } from "react";

export default function Home() {
  const [darkMode, setDarkMode] = useState(false);
  return (
    <div className={darkMode ? "dark": ""}>
      <Head>
        <title>Denvers Space</title>
        <meta name="description" content="Generated by  cred" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="bg-white px-10 md:px-20 lg:px-40 ">
        <section className=" min-h-screen">
<nav className="py-10 mb-12 flex justify-between">
  <h1 className="text-xl font-burtons">developed by</h1>
  <ul className="flex items-center">
    <li>
      <BsFillMoonStarsFill onClick={() => setDarkMode(!darkMode)} className="cursor-pointer text-xl"/>
    </li>
    <li><a className="bg-gradient-to-r from-cyan-500 to-teal-500 text-white px-4 py-2 rounded-md ml-8 " href="#">Resume</a></li>
  </ul>
</nav>
<div className="text-center p-10">
  <h2 className="text-5xl py-2 text-teal-600 font-medium md:text-6xl">Denver Lopes</h2>
  <h3 className="text-2xl py-2 md:text-3xl">Full-Stack Developer.</h3>
  <p className="text-md py-5 leading-8 text-gray-800 md:text-xl max-w-lg mx-auto">
    A self-taught developer w/ pro skills in web & mobile applications development.
    Check out my projects down below and take it from there!
  </p>
</div>
<div className="text-5xl flex justify-center gap-16 py-3 text-gray-600">
<AiFillGithub/>
<AiFillLinkedin/>
</div>
<div className="relative bg-gradient-to-b from-teal-500 rounded-full w-80 h-80 mt-20 mx-auto overflow-hidden md:h-96 md:w-96">
  {/* now some comps below are Next.js specific */}
  <Image src={deved}  layout="fill" objectFit="cover"/>
</div>
        </section>

<section>
  <div>
    <h3 className="text-3xl py-1">My skills package</h3>
    <p className="text-md py-2 leading-8 text-gray-800">The code snippet you provided seems to be an Axios POST request in a JavaScript environment, likely a React Native app, <span className="text-teal-500">attempting</span> to register a user by sending data to a local server. Without more context, it's a bit difficult to <span className="text-teal-500">pinpoint</span> what might be wrong, but I'll try to point out a few potential issues</p>
    <p className="text-md py-2 leading-8 text-gray-800">The code snippet you provided in a JavaScript environment, likely a React Native app, <span className="text-teal-500">attempting</span> to more context, it's a bit difficult to <span className="text-teal-500">pinpoint</span> what might be wrong, but I'll try to point out a few potential issues</p>
  </div>
  <div className="lg:flex gap-10">
    <div className="text-center shadow-lg p-10 rounded-xl my-10">
      <div className="flex justify-center">
      <Image src={design} width={100} height={100}/>
      </div>
     
      <h3 className="text-lg font-medium pt-8 pb-2">Beautiful Designs</h3>
      <p>Creating elegant designs suited for your needs</p>
      <h4 className="py-4 text-teal-600">Design tools I use</h4>
      <p className="text-gray-800 py-1">Photoshop</p>
      <p className="text-gray-800 py-1">Illustrator</p>
      <p className="text-gray-800 py-1">Figma</p>
    </div>
    <div className="text-center shadow-lg p-10 rounded-xl my-10">

<div className="flex justify-center">
<Image src={code} width={100} height={100}/>

</div>
      
      <h3 className="text-lg font-medium pt-8 pb-2">Beautiful Designs</h3>
      <p>Creating elegant designs suited for your needs</p>
      <h4 className="py-4 text-teal-600">Design tools I use</h4>
      <p className="text-gray-800 py-1">Photoshop</p>
      <p className="text-gray-800 py-1">Illustrator</p>
      <p className="text-gray-800 py-1">Figma</p>
    </div>
    <div className="text-center shadow-lg p-10 rounded-xl my-10">
      <div className="flex justify-center">  
       <Image src={consulting} width={100} height={100}/>
      </div>
      <h3 className="text-lg font-medium pt-8 pb-2">Beautiful Designs</h3>
      <p>Creating elegant designs suited for your needs</p>
      <h4 className="py-4 text-teal-600">Design tools I use</h4>
      <p className="text-gray-800 py-1">Photoshop</p>
      <p className="text-gray-800 py-1">Illustrator</p>
      <p className="text-gray-800 py-1">Figma</p>
    </div>
  </div>
</section>
<section>
  <div>
    <h3 className="text-3xl py-1">Portfolio</h3>
    <p className="text-md py-2 leading-8 text-gray-800">The code snippet you provided seems to be an Axios POST request in a JavaScript environment, likely a React Native app, <span className="text-teal-500">attempting</span> to register a user by sending data to a local server. Without more context, it's a bit difficult to <span className="text-teal-500">pinpoint</span> what might be wrong, but I'll try to point out a few potential issues</p>
    <p className="text-md py-2 leading-8 text-gray-800">The code snippet you provided in a JavaScript environment, likely a React Native app, <span className="text-teal-500">attempting</span> to more context, it's a bit difficult to <span className="text-teal-500">pinpoint</span> what might be wrong, but I'll try to point out a few potential issues</p>
  </div>
  <div className="flex flex-col gap-10 py-10 lg:flex-row lg:flex-wrap ">
    
    <div className="basis-1/3 flex-1"><Image src={web1} className="rounded-lg object-cover" width={'100%'} height={'100%'} layout="responsive" /></div>
   
    <div className="basis-1/3 flex-1"><Image src={web2}className="rounded-lg object-cover" width={'100%'} height={'100%'} layout="responsive" /></div>
   
    <div className="basis-1/3 flex-1"><Image src={web3} className="rounded-lg object-cover" width={'100%'} height={'100%'} layout="responsive"/></div>

    <div className="basis-1/3 flex-1"><Image src={web4} className="rounded-lg object-cover" width={'100%'} height={'100%'} layout="responsive"/></div>

    <div className="basis-1/3 flex-1"><Image src={web5} className="rounded-lg object-cover" width={'100%'} height={'100%'} layout="responsive"/></div>

    <div className="basis-1/3 flex-1"><Image src={web6} className="rounded-lg object-cover" width={'100%'} height={'100%'} layout="responsive"/></div>
  </div>
</section>
      </main>
    </div>
  );
}

额外提示 #

你的代码中技能介绍部分存在占位文本（比如Axios相关内容），可以后续替换成实际的技能描述，不影响功能但会优化页面展示效果。

原始报错信息 #

./app/page.js
ReactServerComponentsError:

You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

    ,-[/Users/denverlopes/repos/portfolio_website/portfolio/app/page.js:13:1]
 13 | import web5 from '../public/web5.png';
 14 | import web6 from '../public/web6.png';
 15 | 'use client'
 16 | import { useState } from "react";
    :          ^^^^^^^^
 17 | export default function Home() {
 18 |   const [darkMode, setDarkMode] = useState(false);
 19 |   return (
    `----

Maybe one of these should be marked as a client entry with "use client":
  ./app/page.js

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