Create a New Next.js App for an Online Store

Colby Fayock: [0:00] Getting started, we're going to kick things off with this Next.js starter that I created that's going to give us a basic UI with some products and just some page elements that's going to give us a great starting place to jump into this application.

[0:12] You can find this repo over on my GitHub, or you can navigate to spacejelly.dev/gearstarter, or you can find the link right in the description. In order to spin up this application, I'm going to scroll down where I'm going to find this Quick Start section, where I can either use yarn or npx, depending on my preference.

[0:28] I'm going to use yarn for this walkthrough, and I'm going to go ahead and copy that command for yarn create next-app, and in my terminal, I'm going to go ahead and paste that command. At the end, I'm also going to tack on my space-jelly-gear.

[0:42] What that's going to do is it's going to create a new Next.js project in that local directory using my starter, where it's going to first clone down that project, it's going to install all the dependencies, and it's also going to reset Git history so we have a great starting point.

[0:57] Once it's done, we can navigate into my space-jelly-gear. We can run yarn dev or npm run dev, depending on what you're using. We can open up this localhost:3000, which is the default server. Once the page is finished loading, we can see that we have that same Next.js application, only we have it being served locally.

[1:15] For this lesson, our goal was only to spin up this first application, but let's take a quick look inside to see what we're dealing with.

[1:21] If this is your first time using Next.js, you might see a few folders in here that you don't recognize such as this .Next.js, which is going to be Next.js's way of maintaining and keeping track of this project. We'll also have our Node modules, which is a typical npm system to manage packages. We'll also have a public directory where we can host any files or assets that we want to be served statically.

[1:45] Then we have our src, which is going to include all the application logic for our app. Before we actually dive into the src though, we have a few other things including our lint file, which is just the default Next.js linting rules.

[1:56] We also have a .gitignore. We have a jsconfig.json, which is one thing I do want to point out, where we have these paths that are getting mapped including the components folder, a data folder, hooks, etc., etc. What this is going to do is allow us to use these particular strings in order to pull in modules, but from these directories, when we're working inside of our application.

[2:19] While using this pattern is definitely not a critical or required part of this walkthrough, it's just a nice way to standardize how we're importing components and other parts of our application. Finally, we have our next.config.js, which is just the default that comes out of the box with Next.js.

[2:37] Digging into the src directory, we already have a few components in here, including a Button, a Container, a Footer, Header, and a Layout, which is going to give us the basic page layout that we're going to be using.

[2:48] We also have a data folder where we have a list of a bunch of products just so that we can have some product data filled in already to get us started.

[2:56] We also have our pages and our styles, where the styles are currently using SCSS or SASS, in order to make up the page styles where inside of our index.js is going to be our home page.

[3:08] Inside of our home page, we can already see that pattern that we were talking about inside of our jsconfig.json file, where we're able to use the @ symbol and that directory that we choose in order to easily access those different components, and the data, and the styles within our components.

[3:23] Looking at the code inside here, we'll notice that the code inside of the home component, or our home page isn't anything that special. We're just rendering out some content and our products so that we have something to start off and work with.

[3:37] Most importantly, we're able to access that local product data where we can see here, we're just grabbing four for our featured section, but we'll see throughout this course how we can pull in this data programmatically and dynamically using GraphCMS to manage that data.

[3:52] On top of that, we'll also learn how we can wire up this ADD TO CART button so that we can give our visitors or potential customers a way to add these items to their cart, and eventually check out and buy our products.

[4:04] Now we have the basic starting point for our application, and we're ready to dig in.