Erhalten des asynchronen Client-Komponentenfehlers: Wie schreibe ich diese Next.js-Client-Komponente mit useEffect neu? ⇐ JavaScript

[Anonymous]

Ich besuche derzeit einen Next.js/Sanity CMS-Kurs auf Udemy. Beim Arbeiten an der Produktseite, die angezeigt wird, nachdem Sie auf der Startseite auf ein bestimmtes Produkt geklickt haben, bin ich auf einen Fehler gestoßen, den der Dozent nicht anspricht.
Der Fehler besagt:

Seite ist eine asynchrone Client-Komponente. Derzeit können nur Serverkomponenten asynchron sein. Dieser Fehler wird häufig durch versehentliches Hinzufügen von „use client“ zu einem Modul verursacht, das ursprünglich für den Server geschrieben wurde

Code: Select all

app\product\[slug]\page.tsx

:

Code: Select all

'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

Code: Select all

app\components\ProductDetails.tsx

:

Code: Select all

import React from "react";

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

export default ProductDetails

Einige Lösungen sind auf dieser Seite aufgelistet.

• Ich kann page.tsx nicht zu einer Serverkomponente machen, weil wir useParams() verwenden.
• Ich möchte die zweite Lösung „Using use with Context Provider“ implementieren, aber alle Versuche, die ich unternommen habe, um sie zu implementieren, scheitern und ich werde stecken fest.
• Ich habe auch versucht, die dritte Lösung zu verwenden, bin mir aber nicht sicher, wie ich die Syntax formulieren soll.

Wie könnte ich es mit der zweiten oder dritten Lösung umschreiben?