Intro to Next.js | Lesson 4: Dig Into the Next.js App

Transcript

English (Auto-generated)

video. We're just gonna check what we've just gotten over system and how the next year's application works and how you can get the results. Okay. So first of all, you know, we are in the folder where we have the next year's files and this is the next step. You know, we've created the next step in the previous cast. So now I'm gonna go to the terminal again in the terminal. I need to run the command in the command line to, you know, run the development Silver. I need to write the npm um npm Run deV Okay. I need to press the enter key and after that you can see that it's ready and the server is started at this link and I need to go to this link to see what we got. Okay. And I click there, you can see that this is the, you know, by default page we got welcome to next days. And then they're telling getting started by um editing this file. The file name is pages in the extra day. So when we edit this file, were ultimately editing this whole this whole file, whatever we are seeing in this page. So I'm absolutely gonna go there in the pages, you can see that in the pages there is an index dot Js file and in the index dot Js file, you you would be able to see all these things. So I'm I'm right here and you can see that they're welcome to next Js. So let's say I'm simply gonna clean everything I have in the return. So let's see. Okay I do not need anything like that I can delete that all of them. I delete it simply. Okay now I need to put absolutely I need to put something I just cannot, you know, being the file without putting anything. So here um in the return um let me let me let me just explain what is this all. We do not need the image image. We do not need to import the image. Actually when you're putting the image in the next days you get the image component. We will be talking about that later. The hidden component is also not important for now. So I'm deleting that for now but we will be talking about it. It's tiles will be discussed later. No problem. Okay I cleared all of them. Now this is the basic page. In fact let's let's delete everything for now. I deleted one by one because I just wanted to tell you the importance and then why I'm deleting them. So anyway, so export default Okay or you can go with the typical method. I mean the arrow function. This was the function was applied by default. The function method and the traditional way of the ES five but we're going with the Es six method error error function So constant and I'm writing home as a name and equal to and then this way and uh okay now inside that I need to write what I'm going to return and in the return I'm actually gonna return the here the div and inside that whatever the gs I write I'm going to return that. Okay you can do the gs part. The Js part has to be above the return method because here whatever you're doing, I mean here whatever you're doing here you're gonna return that in this return you know in this return method. So I'm just not doing anything for now, I'm just simply you know, rendering some data. So first we need to have a div tag er I mean you can have any tag just you know just like that and inside the tag you can put anything you can say it is the uh the mid you can see that it's a cover tags. So you need to have those tags like this one and inside that you can have multiple tags or multiple data and you just cannot have two to devise like this way I mean the main tag tag has to be one, you can see that there is an error now because the main tag has to be one and whatever you want to return has to be inside these tags. So these are some rules we discussed and now we can put data inside it for example I'm I'm adding the edge one for now and in the edge when I'm writing introduction, I mean anything I can write I'm writing the introduction and then I'm going down and here I am writing the P tag and in the P tag I'm writing Hey, oh there's the return method. Okay, okay, now I'm saving, I'm saving it. I just wrote something, you know, I just want to get the result in the browser. Now I need to go to the browser and I need to see what I've changed. Interestingly when I just saved this file, I do not need to refresh this page and it's asking for the refreshment because fast refresh will perform a full reload because oh I actually deleted the modules so I need to refresh it for once and then I'm going to get the data, the default export is not a react component. Okay. Oh man, I actually have to export default. Okay home now it should work. Now I'm going back there and you can see that we got the result actually whatever we've created, we must, you know exported as you can see that I did it export default home and then everything is here and then you can see that that's here too in the, in this page and everything is fine. It is working awesome. Okay, so now you know how you can edit the files in the, in the next days being inside the div tag and whatever you want to put, you can put right here, this is the JsX and we will be talking about the JsX I think in the next video so no problem. But jsx is a white term. Um, you can also google about it because it's a big thing, but we will be talking a little bit how to use and utilize GSX in the next year in the next video until then stay tuned.
80 Views 0 Likes 0 Comments

In this cast, we will discuss about the files and folders in a basic NextJs app and their importance.

Comment
Leave a comment (supports markdown format)