Как импортировать useState в next.js?

Question

[daiki]

я только сейчас начал пользоваться next и не понимаю почему он не может импортировать useState...

import Image from 'next/image'
import { useEffect, useState } from 'react';
export default function Home() {
  return (
  <>
  </>
  )
}

При импорте он выдает эту ошибку

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.
Learn more: https://nextjs.org/docs/getting-started/react-essentials

   ,-[C:\Users\Tatyana\OneDrive\Рабочий стол\lichi\lichi-project\src\app\page.js:1:1]
 1 | import Image from 'next/image'
 2 | import { useEffect, useState } from 'react';
   :                     ^^^^^^^^
 3 | export default function Home() {
 4 |   return (
 5 |   <>
   `----

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

Comments

[ProjectSoft]

Т. е.

Learn more: https://nextjs.org/docs/getting-started/react-essentials

вам ни о чём не говорит?
Да и дальше всё ясно сказано. Читайте внимательно выводимую ошибку.

[WbICHA]

Что надо курить, чтобы не увидеть решение, которое написано прямо в ошибке? Причём в двух местах.

[daiki]

WbICHA, не думай что я на столько глупый, я поэтому сюда и обратился, что не решается эта проблема

Answer 1

[Алексей]

С 13й версии nextjs при использовании app роутинга компоненты по-умолчанию пытаются отрендериться на сервере, но для компонентов, которые требуют интерактивности на клиенте (например, компоненты с состоянием, кнопки, любые компоненты требующие браузерный api и т.д.) нужно добавлять директиву 'use client' в начале файла компонента, чтобы next понимал, что рендерить его надо на клиенте.

Т.е. в вашем случае, компонент, который будет использовать useState, нужно выделить в отдельный файл и вверху файла добавить 'use client'.

Ну и желательно почитать про это все тут вначале, либо использовать папку pages по старинке.