A tutorial on initializing a new Next.js project using create-next-app. The walkthrough covers project configuration including TypeScript and Tailwind CSS, explores the file structure, explains the role of page and layout components within the app router, and prepares the environment for further development.
Length 8:28
Captions English (Generated), Spanish (Auto-translated), French (Auto-translated), Korean (Auto-translated), Portuguese (Auto-translated), Vietnamese (Auto-translated) #next.js #web development #typescript #tailwind css #app router #coding #vs code #javascript #software engineering #programming
0:00 Okay, so let's go ahead and get started in building our Next.js 0:04 UI. So we're gonna leverage the Next.js 0:07 automatic installation tool called Create-Next-App, 0:12 and is very similar to bootstrapping with 0:14 Create-React-App, if you've ever used that before. 0:18 So I'm gonna go ahead and then run NPX 0:20 Create-Next-App at latest to create our 0:24 Next.js app on the latest version. 0:27 For the project name, I'm gonna go ahead 0:29 and call this Shoppi UI. 0:31 You can call it whatever you would like. 0:34 Then we'll select the default for the rest of the choices, so we're gonna use 0:38 TypeScript, ESLint to lint our code, Tailwind 0:42 CSS, which is a CSS utility library. 0:45 We'll su- choose yes. 0:47 We'll go ahead and not use a source directory, 0:49 just have everything in the root. 0:52 Next, we're gonna go ahead and importantly choose to use the app 0:55 router 0:56 approach, which is the recommended way to build a 0:58 Next.js 0:59 application, 1:01 opposed to using the pages router. 1:04 So the app router is how we're actually going to route requests in our 1:07 application and controls how we build our components out. 1:11 The app router is the modern recommended approach to do this, so we're gonna go 1:15 ahead and choose yes. 1:18 Go ahead and select no to customize the default import alias, and then 1:22 let all of your dependencies go ahead and get installed. 1:26 So you can see our project has successfully created. 1:29 Now we can CD into our UI, and let's go ahead and open up a code 1:33 editor in this project. All right, so now I'm in VS Code and looking 1:37 at the application. Let's take a quick look at what 1:40 Create-Next-App has actually created for us. 1:44 So this is gonna go ahead and create all the files we need to 1:48 actually initialize our application. 1:50 Of course, we have a package JSON, which includes some scripts we can
The rest of the transcript is for members.
Sign in 