Photo by Sora Sagano on Unsplash

Set up a Project with Next.js —[2/9] E-commerce Development Series.

Throughout my tutorial series, you will learn how to make an e-commerce application from scratch with Next.js SSR (Server-Side Rendering), Stripe API, and Firebase. Let’s start your project, code, test, and deploy.

This article is a series of E-commerce Development. If you are only interested in the payment integration, please go to this link and there choose a step that you want to jump to.

This article aims to help you set up your Next.js project. For this tutorial, you will use next.js, stripe, firebase, and styled-components.

Install Necessary npm libraries

First, let’s create a project with Next.js by installing necessary npm modules. You can use Javascript, but for this tutorial, TypeScript is used.

Install Necessary for Next.js project

As the documentation says, Node.js has to be the version or 12.22.0 or later, and macOS, Windows (including WSL), and Linux are supported. You can find the detail on their official website. https://nextjs.org/docs/getting-started

In the terminal, please move to a directory where you want to create your project. I created this project in /Desktop/tutorial

If you want to use Javascript, then you can remove the last option( — typescript) in the command below but I recommend you stick to TypeScript for this tutorial.

npx create-next-app@latest --typescript

After you hit the command, you are asked to name your project. You can name yours whatever you like. I named it ‘e-commerce-app’. It might take more than a few minutes to completely finish the project setting.

But in my first attempt, there was an error in the terminal saying

error next@12.0.9: The engine “node” is incompatible with this module. Expected version “>=12.22.0”. Got “12.18.0” error Found an incompatible module.

Okay, it is just saying my node version, which is v12.18.0, is not compatible.

So I updated my node version to 12.22.0 locally in my project. Then, I deleted the folder that has been named and then hit the command again. You will be asked to name your folder again. You can fill in the same name and hit enter.

It should be successful. After the completion, let’s move forward.

Next, move to the folder that you created. You should see various types of files and folders as shown below.

If you do not see them, there must be an error during the npx create-next-app@latest --typescript Please read carefully the messages in the terminal. Maybe there are error messages. Double-check that the version is not older.

Now, let’s try to run your app with the command below to see if it works.

npm run dev

This command is defined in the package.json file. It basically executes next dev to launch a local server where you can develop your app.

If there is no error, go to http://localhost:3000 which is the local server. You will find the same website as shown below. Now you have successfully created Next.js app 👏 *Please do not modify any of it yet. Please stay with me.

Install More NPM Modules

Now we are missing two npm modules that we must include on our website; Stripe and Firebase. And one useful tool is styled components as well.

First, let’s install Stripe.

Stripe is a payment service provider that accepts many payment methods.

npm i stripe

Then install the firebase tools.

Firebase tools can be used to test, manage, and deploy your Firebase project from the command line

When it’s done, hit firebase login and log into your account. But in my case, unexpectedly I got an error again saying;

The `firebase’ command exists in these Node versions:
12.18.0

Well, I previously installed globally with the node version of 12.18.0 on my computer, and the computer did not recognize thefirebase keyword. So I reinstalled the firebase-tools globally and hit the command below.

npm install -g firebase-tools

Then, firebase login worked. I was asked to select which account I want to be logged in to to create the project. So, selected an account and logged in.

Next, install styled-components.

Styled components lets you write actual CSS in your JavaScript.

npm install styled-components

When it’s done, hit control + C to quit your local server if it is still running.

And run it again to see if it runs without any problems. If it is working well, perfect. We have installed the necessary npm modules for the tutorial. Next, let’s create a development environment with Firebase (this has not been published yet. Coming soon). For more stories’ announcements, please visit this link.

I am in the middle of writing other articles related to e-commerce and payment too right now, so please free to follow me to get notified instantly when my future articles are ready. My account’s theme is e-commerce, payment, and productivity.

(for tips if you wish to send me 🙂☕️)
- Ethereum address
0x45b8c8712159bEfaB29c3b1e97b4534272aDff31