Create a New React Application with the Next.js create-next-app CLI
React is a powerful library that gives us the ability to build dynamic apps with the power of JavaScript and the browser. With it, we can personalize apps and add interactions that allow us to deliver a better user experience to our visitors.
Next.js is a web framework that sits on top of React taking the power of React to another level. With it, we get additional data fetching utilities and site compilation that providers optimized builds with logical ways of managing our data.
create-next-app is the easiest way to get started with Next.js. This CLI tool will scaffold a bare-bones Next.js application that is configured for you to start using right away.
We will generate a new application and explore the directories and files that were created for us. The important directories to note are the pages and styles directories. The pages directory is where your app entry point, API, and other pages you will create live. You'll likely spend most of your time here! The styles directory contains global s
Colby Fayock: [0:00] To get started with a Next.js app, we can type yarn create next-app. Let's call this my-ecom-store. Once it's finished creating the app and installing the dependencies, we can cd into that directory, and we can run yarn dev, which is going to start up our development server.
[0:14] When we're ready, we can open up the address at localhost:3000. Once that loads, we can see that we're immediately Welcome to a new Next.js app.
[0:20] Before we move on, let's open this in our favorite text editor, so we can see what's going on. We get a few things by default with the Next.js app. First, we get the pages directory which includes API, which we're not going to use for this, but you can create Lambda functions. We also get an index.js which is our home page and an _app.js that wraps our entire application.
[0:37] If we look inside of our index.js file, we can see that we get a few things by default. We get a <Head> component, which is going to show us our title of the page. Then, we have a <main> that wraps the entire page with an h1 that tells us Welcome to the Next.js App, along with the description, and a few cards that link to documentation.
[0:52] We can also see that we have a styles directory which includes some global styles as well as a Home.module.css file that include some styles that are specific to the home page.
[1:01] Our public directory is where we can put files where we want accessible directly and statically from our application. For example, if we want to access the vercel.svg file, we can access that with our server at /vercel.svg.
[1:13] Inside of our home page, we can see that we're already doing just that. With all these files together, we get our new Next.js App.