NextJS component is failing to compile locally when using useState with error "it only works in a Client component"

Question

The directories are correct, but i'm experiencing some difficulties with this, basically i'm using css code as well.

The page is not showing anything. Just that and when i run:

npm run dev

it shows this:

From what I understant you're using Nextjs 13 ? To use state you need to add 'use client' at the first line of your file. That's what the error says. https://beta.nextjs.org/docs/rendering/server-and-client-components#convention — OneQ, Apr 25 '23 at 09:47
Does this answer your question? [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"](https://stackoverflow.com/questions/74965849/youre-importing-a-component-that-needs-usestate-it-only-works-in-a-client-comp) — Youssouf Oumar, Apr 26 '23 at 18:09

score 1 · Accepted Answer · answered Apr 25 '23 at 09:47

You're trying to use useState in a component that your app is treating as a server component.

To fix this, in your src/app/page.tsx put this as the first line in your file:

"use client"

This will tell next that this is meant to be a client component so you can now safely make use of useState.

1 Answers1