Thiết kế website giá rẻ

Question

Hi I am new to next Js and cant solve this error. I dont know what is the error and how to explain it.Here are some photos and code

app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import {StateContext} from "@/context/StateContext";
import { Toaster } from "react-hot-toast";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">   
      <body className={inter.className}>
        <StateContext>
          <Toaster></Toaster>
        {children}
        </StateContext>
       
        </body>
    </html>
  );
}

context/StateContext.tsx contain Context

"use client";

import React,{createContext, useContext, useState, useEffect, Children} from "react";
import {toast} from'react-hot-toast';
import {product_attribute} from '@/components/Interface'

export const Context = createContext<product_attribute| undefined>(undefined);

export const StateContext = ({children} : any) =>{
    const [showCart, setShowCart] = useState(false);
    const [cartItems, setCartItems] = useState();
    const [totalPrice, setTotalPrice] = useState();
    const [totalQuantities, setTotalQuantities] = useState();
    const [qty, setQty] = useState(1);

    const incQty = () => {
        setQty((prevQty) => prevQty + 1);
    }

    const decQty = () => {
        setQty((prevQty) => {
            if(prevQty - 1 < 1) return 1;
            return prevQty - 1
        });
    }

    return(
        <Context.Provider 
        value={{
            qty,
            incQty,
            decQty,
        }}>
        {children}
        </Context.Provider>
    )
}

export const useStateContext = () => {
    const context = useContext(Context);
    return context;
};

components/Interface.tsx contain product_attribute

export interface SimplifiedProduct{
    _id : string;
    imageUrl : string;
    name : string;
    price : number;
    slug : string;
}

export interface fullProduct{
    id : string;
    image : any;
    details : string;
    name : string;
    price : number;
    slug : string;
}

export interface product_attribute{
    qty : number,
    incQty : () => void,
    decQty : () => void,
}

product/[slug]/page.tsx where i want to use Context


import React, {useContext} from 'react'
import { Navbar, Footer } from '@/components'
import { client, urlFor } from '@/lib/client'
import { fullProduct, SimplifiedProduct } from '@/components/Interface';
import Image from 'next/image';
import { AiOutlineMinus, AiOutlinePlus, AiFillStar,AiOutlineStar} from 'react-icons/ai';
import {getProduct} from '@/components/Product';
import Product from '@/components/Product';
import ImageGallery from '@/components/ImageGallery';
import {Context} from '@/context/StateContext';

const ProductDetails = async({params}:{params : {slug : string}}) => {
const data = await getData(params.slug);
const products : SimplifiedProduct[] = await getProduct();
const  {qty, incQty, decQty} = useContext(Context);

  return (
    
    <div>
        <Navbar/>
        <div className='product-detail-container'>
            <div>
                <ImageGallery images={data.image}/>
            </div>
            <div className='product-detail-desc'>
                <h1>{data.name}</h1>
                <div className='reviews'>
                    <div>
                        <AiFillStar></AiFillStar>
                        <AiFillStar></AiFillStar>
                        <AiFillStar></AiFillStar>
                        <AiFillStar></AiFillStar>
                        <AiOutlineStar></AiOutlineStar>
                    </div>
                    <p>
                        {20}
                    </p>
                </div>
                <h4>Details : </h4>
                <p>{data.details}</p>
                <p className='price'>Rs{data.price}</p>
                <div className='quantity'>
                    <h3>Quantity:</h3>
                    <p className='quantity-desc'>
                        <span className='minus' onClick={decQty}><AiOutlineMinus/></span>
                        <span className='num' >{qty}</span>
                        <span className='plus' onClick={incQty}><AiOutlinePlus/></span>
                    </p>
                </div>
                <div className="buttons">
                  <button type="button" className="add-to-cart" >Add to Cart</button>
                  <button type="button" className="buy-now" >Buy Now</button>
                </div>
            </div>
        </div>
        <div className="maylike-products-wrapper">
          <h2>You may also like</h2>
          <div className="marquee">
            <div className="maylike-products-container track">
            {products.map((item:any) => (
                <Product key={item._id} data={item} />
              ))}

            </div>
          </div>
      </div>
        <Footer/>
     </div>
  )
}

async function getData(slug :string){
    const Query = `
  *[_type == "product" && slug.current == "${slug}"][0]{
_id,
  name,
  price,
  image,
  slug,
  details,
}
  `;
    const product : fullProduct = await client.fetch(Query);
    return product;
  }

export default ProductDetails

Error Occurings

I tried to use “use client” in [slug]/page.tsx it didnt resolve anything

Thiết kế website giá rẻ

Danh mục

Problem with createContext and useContext in Next Js