By combining Magento 2 with NextJs, you can unlock a fast, scalable, and engaging shopping experience for your customers.<\/p>\n\n\n\n
You might also want to check the Nextjs development services<\/a> to aid your developmental progress. <\/p>\n\n\n\n Magento 2 is a popular open-source e-commerce<\/a> platform that introduced GraphQL API support for client-side technologies like ReactJS and NextJS.<\/p>\n\n\n\n In this blog, we will work with the GraphQL API endpoints to build the NextJS theme.<\/p>\n\n\n\n Basically, GraphQL is a query language for APIs that provides the power to ask for exactly what they need and nothing more. <\/p>\n\n\n\n To access the GraphQL endpoints provided by Magento 2, simply enter the URL http:\/\/<magento2-server>\/graphql in the Chrome browser’s address bar.<\/p>\n\n\n\n Step 1: Project Setup<\/strong> – In this first step, we need to set up the NextJs project. You can follow this setup nextjs project<\/a> blog.<\/p>\n\n\n\n For CSS UI, you can use the Tailwind CSS<\/a> dependencies for a good Experience within the NextJs Project.<\/p>\n\n\n\n Step 2: Set up the Apollo client-<\/strong> We will need Apollo client dependencies that help you with both Apollo Client<\/a> and GraphQl API.<\/p>\n\n\n\n Apollo Client is a state management library used to fetch, cache, and update application data.<\/p>\n\n\n\n Step 3: Global Variable Setup<\/strong> – We\u2019re going to create a file named .env in the root directory and add the following code.<\/p>\n\n\n\n Step 4: Export Global Variable – <\/strong>We need to define the global variable in the next.config.js file. otherwise, you can not use this variable at the front end. So write the following code.<\/p>\n\n\n\n Step 5: Create the GraphQl Fil<\/strong>e.<\/p>\n\n\n\n Create Step 6: Create a Route file to Display the Product<\/strong> – We\u2019re going to create a file named [urlKey].js in pages\/product\/[urlKey].js.<\/p>\n\n\n\n In this blog, we are using the Static Site Generation (SSG)<\/a> feature of Next.js. SSG generates HTML pages at build time, which are then reused for every request.<\/p>\n\n\n\n GetStaticPaths is an async function that generates the paths to pre-render based on products.<\/p>\n\n\n\n GetStaticProp is also an async function that generates data at the build time of generated path by the getStaticPaths function.<\/p>\n\n\n\n GraphQl API response <\/p>\n\n\n\n Final Code and UI Design According to the API Response.<\/p>\n\n\n\n You can see the result on http:\/\/localhost:3000<\/p>\n\n\n\nMagento 2 GraphQL API Overview<\/h4>\n\n\n\n
Creating the NextJs project using Magneto 2.<\/h4>\n\n\n\n
MAGENTO_ENDPOINT=http:\/\/<magento2-server>\/graphql<\/pre>\n\n\n\n
\/\/------------next.config.js-----------\/\/\n\n\/** @type {import('next').NextConfig} *\/\nconst nextConfig = {\n env: {\n MAGENTO_ENDPOINT: process.env.MAGENTO_ENDPOINT,\n },\n reactStrictMode: true,\n};\n\nmodule.exports = nextConfig;<\/pre>\n\n\n\nproduct.graphql<\/code> in components\/graphql\/<\/code>. Add the GraphQL query code to fetch product data from the API response.<\/p>\n\n\n\n\/\/-------------components\/graphql\/product.graphql-------------\/\/\n\nquery ProductQuery($filters: ProductAttributeFilterInput) {\n products(filter: $filters) {\n items {\n id\n name\n sku\n description{\n html\n }\n short_description{\n html\n }\n image {\n disabled\n label\n position\n url\n }\n rating_summary\n media_gallery{\n url\n position\n label\n disabled\n }\n }\n }\n}<\/pre>\n\n\n\n\nimport PRODUCT_QUERY from '..\/..\/components\/graphql\/Product.graphql';\n\nexport async function getStaticPaths() {\n let paths = [];\n const { data } = await client.query({\n query: PRODUCT_QUERY,\n variables: { filters: {}, pageSize: 12 },\n });\n const products = data?.products?.items || [];\n paths = products.map((product) => ({\n params: { urlKey: product?.url_key || '404' },\n }));\n \n return { paths, fallback: 'blocking' };\n}<\/pre>\n\n\n\nexport async function getStaticProps({ params }) {\n const { data } = await client.query({\n query: PRODUCT_QUERY,\n variables: { filters: { url_key: { eq: params?.urlKey } } },\n });\n const product = data?.products?.items?.[0] || null;\n\n if (!isValidObject(product) || !product.sku) {\n return {\n notFound: true,\n };\n }\n\n return {\n props: {\n product: product,\n },\n revalidate: 60, \n };\n}<\/pre>\n\n\n\n![\"final-image\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/final-image-1200x675.png\")
<\/figure>\n<\/figure>\n\n\n\n\/\/---------------pages\/product\/[urlkey].js-----------\/\/\n\nimport Image from 'next\/image';\nimport { useState } from 'react';\nimport PRODUCT_QUERY from '..\/..\/components\/graphql\/Product.graphql';\n\nconst Product = ({ product }) => {\n const { thumbnail, price_range, sku } = product;\n const [addtocart, setAddtocart] = useState(1);\n const add = () => {\n setAddtocart(addtocart + 1);\n };\n const sub = () => {\n addtocart > 1 && setAddtocart(addtocart - 1);\n };\n\n return (\n <div class="grid grid-cols-5 gap-4 w-[85%] mx-auto my-5">\n <div className="col-span-2 border border-1 border-solid border-slate-400 rounded">\n <Image src={thumbnail?.id} width={500} height={500} \/>\n <\/div>\n <div className="col-span-3 mx-10">\n <div className="">\n <div display="grid">\n <p className="font-[500] text-[2.5rem]">{product.name || ''}<\/p>\n <div className="flex justify-between ">\n <p className="text-price" sx={{ paddingTop: 1.5 }}>\n <span className="font-semibold">\n $ {price_range?.minimum_price?.regular_price?.value}\n <\/span>\n\n <s className="pl-4 italic font-light text-fadedText">\n {price_range?.discount?.amount_off}\n <\/s>\n <\/p>\n <p variant="body1" className="mt-7">\n Sku : {sku}\n <\/p>\n <\/div>\n <div className="flex">\n <button\n onClick={sub}\n aria-label="increment"\n className="text-white w-10 rounded-l h-8 border-0 cursor-pointer bg-secondary hover:bg-brand hover:contrast-75"\n >\n -\n <\/button>\n <input\n max={6}\n type="text"\n 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"\n min={1}\n value={addtocart}\n id="quantity"\n placeholder="0"\n \/>\n\n <button\n aria-label="increment"\n className="text-white w-10 h-8 rounded-r border-0 cursor-pointer bg-secondary hover:bg-brand hover:contrast-75"\n onClick={add}\n >\n +\n <\/button>\n <\/div>\n\n <p className="pt-3 text-hoverEffect text-[16px] ">\n {product.short_description?.html ||\n ''}\n <\/p>\n <\/div>\n\n <button\n color="secondary"\n variant="contained"\n className="w-full py-4 mx-auto"\n type="submit"\n >\n Add to cart\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n );\n};\n\nexport default Product;\n\nexport async function getStaticPaths() {\n let paths = [];\n const { data } = await client.query({\n query: PRODUCT_QUERY,\n variables: { filters: {}, pageSize: 12 },\n });\n const products = data?.products?.items || [];\n paths = products.map((product) => ({\n params: { urlKey: product?.url_key || '404' },\n }));\n \n return { paths, fallback: 'blocking' };\n}\n\nexport async function getStaticProps({ params }) {\n const { data } = await client.query({\n query: PRODUCT_QUERY,\n variables: { filters: { url_key: { eq: params?.urlKey } } },\n });\n const product = data?.products?.items?.[0] || null;\n\n if (!isValidObject(product) || !product.sku) {\n return {\n notFound: true,\n };\n }\n\n return {\n props: {\n product: product,\n },\n revalidate: 60, \n };\n}<\/pre>\n\n\n\n![\"screenshot_1695823348593\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/screenshot_1695823348593-1200x551.png\")
<\/figure>\n<\/figure>\n\n\n\n