Skip to content

Build Beautiful Storefronts Quickly with Shopify and Next

Build Beautiful Storefronts Quickly with Shopify and Next

Introduction

Shopify is one of the world’s best e-commerce platforms for building online stores of any size. It’s a hosted platform, which means you don’t have to worry about the technical details of managing a server or dealing with software updates. You can focus on building your business instead. Next.js is a React framework for building static and server-side rendered applications. It’s a great choice for building e-commerce storefronts and enables you to do more customization, and it’s what we’ll be using in this article.

the shopify application we are building in this article

Shopify Next.js Starter Kit

Recently, we’ve created a starter kit that you can use to build your own Shopify storefront with Next.js. It’s a great way to get started quickly especially since it is powered by the new App Router and React Server Components, and it’s completely free. You can find it on GitHub here: Shopify Next.js Starter Kit

We also have a live demo of the starter kit here: Shopify Next.js Starter Kit Demo

Getting Started

To get started, open your terminal and run the following command:

And choose Shopify, NextJS 13.4 and Tailwind CSS starter.dev - choose Shopify, NextJS 13.4 and Tailwind CSS

Then, choose the project name choose project name

And everything ready to go, next steps are to go to the directory and install the packages

Setup Shopify Account

Next, you’ll need to create a Shopify store. There are two ways to get a Shopify account:

1- You can do this by going to Shopify and clicking on the “Start free trial” button and create a Shopify account.

2- Or you can create a Shopify Partner Account for development purposes

Once you’ve created your store, you’ll need to create a private app. You can do this by going to the “Apps” section of your Shopify admin and clicking on the “Manage private apps” link. Then click on the “Create a new private app” button. Give your app a name, and then click on the “Save” button. You’ll then be taken to a page where you can see your API credentials. You’ll need to copy these credentials into your .env.local file. You can find the .env.local file at the root of your project. It should look something like this:

Modify the design

After adding the required secrets, run npm run dev to run the development server locally the demo shopify application built using starter.dev

The project structure is simple and easy. Since we are using the App Router, all of the routes are under /app folder and the shared components are under /components folder. This structure make it easy for you to edit and modify easily on the design starter.dev folder structure

Also all of the components have been written in a clean way with Tailwind CSS to make it easy for you to edit it.

components in tailwind css

Deploy

Since it’s a Next.js project, its deployment is easier than ever, most of the modern host providers support deploying it with just one click like

Just push the project to a remote git repository using GitHub and connect it to the hosting provider of your choice.

Conclusion

In this article, we’ve shown you how to build a Shopify storefront with Next.js with our new starter kit from Starter.dev. We’ve also shown you how to use the new App Router and React Server Components to build a fast and performant storefront. We hope you’ve enjoyed this article and found it useful. If you have any questions or comments, please feel free to reach out to us on Twitter or GitHub. We’d love to hear from you!