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.
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
Then, choose the 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 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
Also all of the components have been written in a clean way with Tailwind CSS to make it easy for you to edit it.
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!
