For our front end, we will be using Next.js. To create a new application, simply type npx create-next-app client
in your terminal. We can cd
into our project and run the dev server with yarn dev
.
I'll also add some styling in the Home.module.css file that you can copy from the github link below.
Instructor: [0:00] In our terminal, we use the command npx create Next.js Next app. We'll name our app, "Client." This will create a brand new Next.js. We'll stop that and correct the spelling of client. [0:22] After our Next.js application is created, we'll change directories into client, and then start our server with yarn dev. We'll open up our application, which is running on localhost:3000, and we get the usual Next.js starter.
[0:41] We'll open up our Next.js application in VS Code. In VS Code, we'll open our pages folder and inside that open our index.js folder. We'll resize our window, and we'll start by getting rid of this div.
[0:54] We'll change, "Welcome to Next.js" to "Welcome to the future of content." Now, for some styling, we'll go into home.module.styles, and paste this class as well as main blog.
[1:18] We'll go to the bottom and look at our footer and update those classes, and save. Our page should look a little different. There you go. That is how you create a brand new Next.js application.