Building an E-commerce Application with Next.js Commerce 2.0 | Updated 2024

57

Next.js Commerce 2.0 is a powerful framework for building modern e-commerce applications with Next.js. It provides a solid foundation with pre-built components and integrations for various e-commerce platforms. In this article, we’ll walk through the steps to set up and customize a Next.js Commerce 2.0 application.

Prerequisites

Before we begin, ensure you have the following:

• Node.js and npm installed on your machine.
• A GitHub account for repository cloning.
• An e-commerce platform account (e.g., BigCommerce, Shopify).

Steps for Building an E-commerce Application with Next.js Commerce 2.0

Step 1: Clone the Next.js Commerce Repository

First, clone the Next.js Commerce 2.0 repository from GitHub. Open your terminal and run:

git clone https://github.com/vercel/commerce
cd commerce

Step 2: Install Dependencies

Next, install the required dependencies:

npm install

Step 3: Set Up Environment Variables

Create a .env.local file in the root of your project to store your environment variables. You’ll need to add your e-commerce platform credentials here. For example, if you’re using BigCommerce, your .env.local file might look like this:

NEXT_PUBLIC_BIGCOMMERCE_STORE_API_URL=https://api.bigcommerce.com/stores/your_store_hash
NEXT_PUBLIC_BIGCOMMERCE_STORE_API_TOKEN=your_store_api_token
NEXT_PUBLIC_BIGCOMMERCE_STORE_API_CLIENT_ID=your_store_client_id
NEXT_PUBLIC_BIGCOMMERCE_STORE_API_SECRET=your_store_api_secret
NEXT_PUBLIC_VERCEL_ENV=development
NEXT_PUBLIC_VERCEL_URL=http://localhost:3000

Step 4: Configure the E-commerce Platform

In the next.config.js file, configure the e-commerce provider you are using. Uncomment the appropriate provider and add your credentials.

For BigCommerce:

// next.config.js
module.exports = {
  commerce: {
    provider: '@vercel/commerce-bigcommerce',
    providerConfig: {
      clientId: process.env.NEXT_PUBLIC_BIGCOMMERCE_STORE_API_CLIENT_ID,
      secret: process.env.NEXT_PUBLIC_BIGCOMMERCE_STORE_API_SECRET,
      storeHash: process.env.NEXT_PUBLIC_BIGCOMMERCE_STORE_API_URL.split('/').pop(),
      accessToken: process.env.NEXT_PUBLIC_BIGCOMMERCE_STORE_API_TOKEN,
    },
  },
}

Step 5: Run the Development Server

Now, you can start the development server:

npm run dev

Your application should now be running on http://localhost:3000.

Step 6: Customize the Application

Next.js Commerce 2.0 comes with a set of pre-built components and pages. You can customize these to match your design and functionality requirements.

Customizing the Homepage

Open the pages/index.tsx file to customize the homepage. You can add or modify sections to display featured products, collections, or banners.

// pages/index.tsx
import { Layout } from '@components/common'
import { ProductCard } from '@components/product'
import { getConfig } from '@framework/api'
import getAllProducts from '@framework/product/get-all-products'

export default function Home({ products }) {
  return (
    <div>
      <h1>Welcome to My E-commerce Store</h1>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {products.map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
    </div>
  )
}

Home.Layout = Layout

export async function getStaticProps() {
  const config = getConfig()
  const { products } = await getAllProducts(config)

  return {
    props: {
      products,
    },
    revalidate: 14400, // Every 4 hours
  }
}

Customizing the Product Page

To customize the product page, open pages/product/[slug].tsx.

// pages/product/[slug].tsx
import { Layout } from '@components/common'
import { ProductView } from '@components/product'
import { getConfig } from '@framework/api'
import getProduct from '@framework/product/get-product'

export default function ProductPage({ product }) {
  return <ProductView product={product} />
}

ProductPage.Layout = Layout

export async function getStaticPaths() {
  const config = getConfig()
  const { products } = await getAllProducts(config)
  const paths = products.map((product) => ({
    params: { slug: product.slug },
  }))

  return {
    paths,
    fallback: 'blocking',
  }
}

export async function getStaticProps({ params }) {
  const config = getConfig()
  const { product } = await getProduct({ config, variables: { slug: params.slug } })

  return {
    props: {
      product,
    },
    revalidate: 14400, // Every 4 hours
  }
}

Step 7: Deploying Your Application

Once you’re happy with your customizations, you can deploy your Next.js Commerce 2.0 application. Vercel is the recommended platform for deployment.

Deploy to Vercel

1. Push your changes to a GitHub repository.
2. Sign in to Vercel and link your repository.
3. Set the environment variables in Vercel corresponding to your .env.local file.
4. Deploy your application.

Conclusion

Next.js Commerce 2.0 provides a robust framework for building scalable and customizable e-commerce applications. By following this guide, you can set up and tailor a powerful e-commerce platform to your specific needs.

For more updates on programming trends and tutorials, visit blogsea.net regularly.

Building an E-commerce Application with Next.js Commerce 2.0 – FAQs