Ultimate Instruction to Build a NextJs Theme in Magento 2

npx create-next-app my-magento-theme 
cd my-magento-theme 
npm run dev

@tailwind base;
@tailwind components;
@tailwind utilities;

export const productQuery = `query ProductQuery($filters: ProductAttributeFilterInput) {
 products(filter: $filters) {
   items {
     id
     name
     sku
     description{
       html
     }
     short_description{
       html
     }
     image {
       disabled
       label
       position
       url
     }
     rating_summary
     media_gallery{
       url
       position
       label
       disabled
     }
   }
 }
}`

import axios from 'axios';


export async function handleRequest({
                                       url = null,
                                       query = '',
                                       method = 'POST',
                                       params = {},
                                       options = {},
                                       variables = {},
                                       clientConfig = {
                                           baseURL: 'Your Magento base url',
                                           timeout: 60000
                                       }
                                   }) {
   const client = axios.create(clientConfig);
try {
   return client
       .request({
           ...options,
           headers: {
               accept: 'application/json',
               ...(options.headers || {})
           },
           url,
           method,
           data: {query, variables},
           params
       })
       .then(({data: {data = {}, errors = []} = {}}) => ({data: data, errors}));
} catch (e) {
   console.log('api error', e);
}


}

'use client'


import {useState} from "react";
import Image from "next/image";


export const Product = ({product = {}}) => {
   const {thumbnail = {}, price_range = {}, sku} = product;
   const [addtocart, setAddtocart] = useState(1);
   const add = () => {
       setAddtocart(addtocart + 1);
   };
   const sub = () => {
       addtocart > 1 && setAddtocart(addtocart - 1);
   };


   return (
       <div class="grid grid-cols-5 gap-4 w-[85%] mx-auto my-5">
           <div className="col-span-2 border border-1 border-solid border-slate-400 rounded">
               <Image src={thumbnail?.id} width={500} height={500}/>
           </div>
           <div className="col-span-3 mx-10">
               <div className="">
                   <div display="grid">
                       <p className="font-[500] text-[2.5rem]">{product.name || ''}</p>
                       <div className="flex justify-between ">
                           <p className="text-price" sx=>
               <span className="font-semibold">
                 $ {price_range?.minimum_price?.regular_price?.value}
               </span>
                               <s className="pl-4 italic font-light text-fadedText">
                                   {price_range?.discount?.amount_off}
                               </s>
                           </p>
                           <p variant="body1" className="mt-7">
                               Sku : {sku}
                           </p>
                       </div>
                       <div className="flex">
                           <button
                               onClick={sub}
                               aria-label="increment"
                               className="text-white w-10 rounded-l h-8 border-0 cursor-pointer bg-secondary hover:bg-brand hover:contrast-75"
                           >
                               -
                           </button>
                           <input
                               max={6}
                               type="text"
                               className="relative w-14 border-[1px] border-gray flex items-center px-3 font-semibold text-center text-gray-700   outline-none cursor-default -z-10 readonly focus:outline-none text-md hover:text-black focus:text-black md:text-base"
                               min={1}
                               value={addtocart}
                               id="quantity"
                               placeholder="0"
                           />
                           <button
                               aria-label="increment"
                               className="text-white w-10 h-8 rounded-r border-0 cursor-pointer bg-secondary hover:bg-brand hover:contrast-75"
                               onClick={add}
                           >
                               +
                           </button>
                       </div>
                       <p className="pt-3 text-hoverEffect text-[16px] ">
                           {product.short_description?.html ||
                               ''}
                       </p>
                   </div>
                   <button
                       color="secondary"
                       variant="contained"
                       className="w-full py-4 mx-auto"
                       type="submit"
                   >
                       Add to cart
                   </button>
               </div>
           </div>
       </div>
   );
};

import styles from "./page.module.css";
import {Product} from "@/app/product";
import {handleRequest} from "@/helpers/api";
import {productQuery} from "@/app/productQuery";


async function Home() {
   const {data: {products: {items}}} = await getProducts({urlKey: 'fusion-backpack'});
 return (
   <main className={styles.main}>
     <Product product={items[0]} />
   </main>
 );
}


export default Home


export async function getProducts({urlKey = ''}) {
   const data = await handleRequest({query: productQuery, variables: {filters: {url_key: {eq: urlKey}}},})


   return data;
}