Creating a Shopify Store with Next.js: A Step-by-Step Guide

Table of Contents

• Setting up a Shopify Store
• Getting the Shopify Storefront API Token
• Creating a Next.js App
• Building the Ecommerce Store’s Homepage
• Creating Collection Pages
• Creating a Product Page
• Retrieving Products with the Shopify Storefront API

Setting up a Shopify Store

To start, create a Shopify store if you haven’t already. Go to Shopify’s website and sign up for a free trial. Once you’ve created your store, set up some collections to categorize your products. To create a collection, go to Products > Collections and click on Create collection. Enter a title and choose Manual for the collection type.

Getting the Shopify Storefront API Token

To access your store’s data from a third-party application, you need to enable the Storefront API and get an API token. Go to Apps > Develop apps for your store and follow the steps to enable app development. Create a new app and go to Configuration > Storefront API. Under Storefront API access scopes, select all the checkboxes and click Save. Install your newly created app and retrieve your access token by going back to your application and clicking on API credentials.

Creating a Next.js App

For this tutorial, we’ll use MUI (Material-UI) to build our frontend. Run the following command to create a new Next.js project with MUI:

npx create-next-app my-app --ts --use-app-dir --example https://github.com/mui/material-ui/tree/master/examples/nextjs-with-typescript

Building the Ecommerce Store’s Homepage

Create a new component called ProductList inside the components folder. This component will list all the products in your store. Use MUI’s ImageList, ImageListItem, and ImageListItemBar components to create a grid layout with images and titles.

// components/ProductList.js
import { ImageList, ImageListItem, ImageListItemBar } from '@mui/material';

const ProductList = ({ products }) => {
  return (
    
      {products.map((product) => (
        
          
          
        
      ))}
    
  );
};

export default ProductList;

Create another component called Navigation to display the navigation bar. Use MUI’s AppBar and Toolbar components to create a simple navigation bar.

// components/Navigation.js
import { AppBar, Toolbar } from '@mui/material';

const Navigation = () => {
  return (

Ecommerce Store

      
    
  );
};

export default Navigation;

Finally, use these components in your application’s homepage (pages/index.js). Import the ProductList and Navigation components and pass in some dummy data to test the layout.

// pages/index.js
import ProductList from '../components/ProductList';
import Navigation from '../components/Navigation';

const HomePage = () => {
  const products = [
    { id: 1, image: 'https://picsum.photos/200/300', title: 'Product 1' },
    { id: 2, image: 'https://picsum.photos/200/301', title: 'Product 2' },
    { id: 3, image: 'https://picsum.photos/200/302', title: 'Product 3' },
  ];

  return (

  );
};

export default HomePage;

Creating Collection Pages

Create a new page for each collection in your store. Use Next.js’ dynamic routing feature to create routes like /collections/[collectionName]. Inside the pages folder, create a new folder called collections and add a new file called [collectionName].js.

// pages/collections/[collectionName].js
import { useRouter } from 'next/router';
import ProductList from '../../components/ProductList';

const CollectionPage = () => {
  const router = useRouter();
  const collectionName = router.query.collectionName;

  // Fetch products from Shopify Storefront API
  const products = [];

  return (

  );
};

export default CollectionPage;

Creating a Product Page

Create a new page for each product in your store. Use Next.js’ dynamic routing feature to create routes like /products/[productHandle]. Inside the pages folder, create a new folder called products and add a new file called [productHandle].js.

// pages/products/[productHandle].js
import { useRouter } from 'next/router';

const ProductPage = () => {
  const router = useRouter();
  const productHandle = router.query.productHandle;

  // Fetch product from Shopify Storefront API
  const product = {};

  return (

  );
};

export default ProductPage;

Retrieving Products with the Shopify Storefront API

To fetch the products from your Shopify store, you need to install the Shopify JavaScript Buy SDK. Run the following command to install the package:

npm install shopify-buy

Create a new file called shopify.js inside the lib folder. Import the Shopify Buy SDK and create a new client instance with your store’s domain and API token.

// lib/shopify.js
import { Client } from 'shopify-buy';

const shopifyClient = new Client({
  domain: 'your-store.myshopify.com',
  accessToken: 'your-api-token',
});

export default shopifyClient;

Use the client instance to fetch the products from your store. For example, you can use the fetchAll method to fetch all the products in your store.

// lib/shopify.js
import shopifyClient from './shopify';

const fetchProducts = async () => {
  const products = await shopifyClient.fetchAll('products');
  return products;
};

export default fetchProducts;

Finally, use the fetched products in your application’s homepage and collection pages. Pass the products as props to the ProductList component and use them to render the product grid.

// pages/index.js
import ProductList from '../components/ProductList';
import fetchProducts from '../lib/fetchProducts';

const HomePage = () => {
  const products = fetchProducts();

  return (

  );
};

export default HomePage;