Получение асинхронной ошибки клиентского компонента: как переписать этот клиентский компонент Next.js с помощью useEffec ⇐ Javascript

[Anonymous]

В настоящее время я прохожу курс Next.js/Sanity CMS на Udemy. Я столкнулся с ошибкой, которую лектор не устраняет при работе со страницей продукта, которая появляется после нажатия на конкретный продукт на главной странице.
Ошибка гласит:

страница является асинхронным клиентским компонентом. На данный момент асинхронными могут быть только серверные компоненты. Эта ошибка часто возникает из-за случайного добавления «использовать клиент» в модуль, который изначально был написан для сервера

Код: Выделить всё

app\product\[slug]\page.tsx

:

Код: Выделить всё

'use client'

import { useParams } from 'next/navigation';
import { Navbar, ProductDetails } from '../../components';
import { client } from '@/sanity/lib/client';
import { groq } from 'next-sanity';

const page = async () => {
const {slug}:any = useParams();
const products = await client.fetch(groq `*[_type=="product"]`);
const product = products.find((product:any)=>product.slug.current == slug);
return (




)
}

export default page

Код: Выделить всё

app\components\ProductDetails.tsx

:

Код: Выделить всё

import React from "react";

const ProductDetails = ({product}:any) => {
return (
{product.name}
)
}

export default ProductDetails

Некоторые решения перечислены на этой странице.

• Я не могу сделать page.tsx серверным компонентом, поскольку мы используем useParams().
• Я хочу реализовать второе решение «Использование использования с поставщиком контекста», но все попытки реализовать его не увенчались успехом, и я застрял.
• Я также пытался использовать третье решение, но не уверен, как сформулировать синтаксис.

Как я могу переписать его, используя второе или третье решение?

Подробнее здесь: https://stackoverflow.com/questions/798 ... client-com