How to Run a Next.js Project

ACCESS the FULL COURSE here: https://academy.zenva.com/product/full-stack-web-development-mini-degree/?zva_src=youtube-fullstackmd

TRANSCRIPT

What's up everyone and welcome to our tutorial on running a project. Here we're going to create an index.js file and then we're actually gonna run the project to be able to explore how easy it is with Next.js. So how do we go about running a project? We first start by obviously setting the project up. We've completed that part at this point. We are then going to create that index.js file. Put some code that outputs HTML to a page. And then we'll use the terminal or the command prompts to run one command which'll get things up and running. At least this will run it locally. It won't actually run on the server but will be able to simulate a client server relationship. So the steps for this tutorial are gonna be to set up our index.js file. We'll create it, put it in pages and put in the necessary code. We'll then run the project again through command prompt or terminal. And then we'll examine the output in a browser. We'll also get a chance to explore the hot reload feature. So let's head on back to our terminal or command prompt. Again, this is what our project looks like right now. It's got these four items in it. We're gonna go right into pages if we're not there already. As you can see I am, that's where we ended last time. And we're gonna go ahead and create an index.js file. So this is easier I think through the text editor itself. I'm just gonna go up here. Create a new file and I'm gonna save this right away as index.js. So make sure you have the .js extension, which will automatically make it a JavaScript file. I wanna put this in pages not node_modules. So let's give that a save. We can see that this is JavaScript, index.js. And we're going to just put a few lines of code in here. So the way that this works is we create these constants which will output some kind of HTML and then we run them by exporting them. So we'll create a constant called Index, we're going to set this equal to, sum, closure which is going to output this code, oop, actually, this shouldn't be curly braces I think, this is just supposed to be regular braces like this. And let's just give ourselves some room there. So from here we're going to, I guess create a div. And this div is just gonna contain some Hello World text or something. So just put that on a couple of lines. And within this, let's just create a paragraph, like so. It's just gonna say our classic hello world like this. All right, so now we've got Index set up. We need to export it, just export the default value of Index like so. We can give this a save and we're ready to run it. So if you're not familiar with this syntax, we're basically just creating this constant In ... https://www.youtube.com/watch?v=8iDI0eEydxw