You can access the full course here: Intro to Next.js
Table of contents
Part 1
If you’re interested in building minimalist static web pages and web apps and have some experience with React, Next.js is the framework for you. It functions similar to react with very little setup required. Installing and running a project is as simple as running a few commands from the terminal and setting up a project with an index.js file. It works on the Node.js framework so installing extra libraries is a breeze and with the hot reload feature, you can update your web pages and see the changes instantaneously.
In this course, we will be exploring various aspects of the Next.js ecosystem. We will start with the basic installation and setup of a project and see how to run a Next.js app. We will then add an extra page and learn how to navigate using Next.js features and how to pass and retrieve data using a URL as well as some URL tips and tricks. Next, we will learn how to use CSS to style our pages and import and use Bootstrap. Finally we will export our app to static HTML and use ZEIT Now to host it. Once we are comfortable using these features of Next.js, we will build a final project, a website that will act as a home page, displaying some of our projects and navigating to a project page when a project is selected.
Part 2
First, we need to create a project folder and navigate into it. Open up an instance of terminal (command prompt or PowerShell if you are using Windows) and create and navigate to a folder named “practice” by typing the commands:
mkdir practice cd practice
We then initialize the project and install Next.js. You must have Node.js installed for this. In terminal, type:
npm init -y npm install --save react react-dom next
This sets the project up with the “package.json” file and the basic dependencies. We will modify this throughout directly or through terminal commands. Next we make a “pages” directory. This is where all of our code files will go. In terminal, type:
mkdir pages
Part 3
Within “pages”, create an “index.js” file. This must be the homepage for any Next.js project. Every different page in our projects will have its own “.js” file. Open “index.js” using any text editor and put some content in it like this:
const Index = () => ( <div> <p>Hello Next.js</p> </div> )<span style="font-weight: 400"> </span><span style="font-weight: 400">export default Index</span>
This will just display “Hello Next.js” when the project is run. Speaking of starting the project, let’s run it for the first time. We have to modify the “scripts” portion of “package.json” to look like this:
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "next",
"build": "next build",
"start": "next start"
}Make sure you navigate to the project directory in the terminal and run the command:
npm run dev
This will compile and run the project on “http://localhost:3000” so if you open a browser and follow the link, you should see:
The project is now up and running! Go ahead and change the text inside of the <p> tag. As long as the session is still running in Terminal, whenever you save “index.js”, you should see the changes updated immediately.
Transcript 1
What’s up everyone? And welcome to our course on Next.js. My name is Nimish and I’ll be guiding you through the next two or so hours, which we’ll learn all about Next.js, how to build static web apps using Next.js.
So for starters, what is Next.js? Next.js is simply a framework for sever-rendered React apps. It’s based on Node.js and React frameworks. And it’s used to create static server-rendered apps. So we generally don’t use this to create anything super complex, it’s a really minimalist framework. So, why Next.js? First to some other frameworks. Well, for starters, it’s super, super easy to use. Especially for those who don’t have too much experience developing web apps. There are minimalist design principles applied to it. So if you’re all about pumping out the basic designs that look good and sleek, that is the Next.js in a nutshell.
It’s also very, very similar to React. So if you have experience using React, then Next.js will be a breeze to you. It’s also super easy to install and deploy. In fact, we don’t even have to download anything extra, we can do everything through npm. And deploying the app is as simple, it’s just running a few commands even to an actual static hosting service. So let’s get into the tutorial itself.
Who is this one for? Well, anyone who wants to develop static web apps with minimalist design, this is great for you. Anyone who’s looking for an easy to use a framework to develop web apps, this is great for you, too. We are expecting at this point you have some familiarity with React and basic HTML, CSS, and JavaScript. We’ll kinda be going through some of these principles fairly quickly and focusing more on the Next.js aspect of things. So what we’ll we going to be covering in this tutorial? Well we have a lot of topics, starting with first installing Next.js and running a project.
Then navigating between pages. Passing data into and receiving data from a URL. This allows us to pass data from one page to another. We’ll learn how to mask URLs, to hide unnecessary pieces of information. We’ll learn how to style pages with our own manual CSS, and also using external CSS libraries like bootstrap. We’ll learn how to then export an app into HTML and also how to deploy an app to a static hosting service we’ll be using right now.
Transcript 2
What’s up everyone, and welcome to our tutorial on installing Next.js. Before we can learn how to use it, we should probably obtain the software and get ourselves set up with a new practice project.
So what do we need to get started? We can think of these as being prerequisites. For starters, we’ll need a text editor. This is gonna be some way to write code. I’m gonna use Sublime Text, although feel free to use whichever one works best for you, that’s notepad or Notepad++ or sublime, either one works. We’ll need some way to run Unix commands as well. For those of you who using Mac or Linux, this’ll be the terminal and for you Windows users, this’ll be Command prompt or PowerShell. And we’ll also need Node.js functionality installed. So I’m kind of assuming you have all three of these things. If not, then please get yourself set up with them before continuing.
How do we then go about installing Next.js? Well, one of the best things about this is that there’s actually no need to download any bulky packages. We simply start a new npm project, install react functionality through a couple of command line commands, and then we add a script to package.json and then finally, create a pages directory and that will be the project fully set up. So what are we going to do in this tutorial here? Well, we’ll actually just install our Next.js functionality and get ourselves set up. We’ll first create a new project directory, install that react to next on functionality, and then create the pages directory.
So let’s head on over to terminal right now. Make sure you have this up and running. This is again for you Windows users, gonna be Command prompt or PowerShell. You’ll probably want to run that as an administrator. And for those of you who are using Macs or Linux, if you are running into difficulties with your commands, just try running sudo in front of them. Okay, so for starters, we need to make a project directory. I’m gonna show you in Finder where I’ll put mine. There’s gonna be under desktop Zenva, Next.js under course and I’m gonna pass it right here. It’ll just be called something like practice because we’ll be using this just over the next few sections to learn about Next.js.
So I’m gonna first navigate to that location here. Zenva … Then I want to go to next, then I want to go to courses or course. Okay, ls should confirm that there’s nothing in here. So let’s just clear that off. Okay. So the first thing we want to do is make a directory. I’m gonna call mine again Practice and I’m going to cd to that Practice and then I’m going to initialize npm. So I’m gonna do npm in it with the white tag and that will just create a package.json folder.
Okay. So we’re gonna be modifying this script’s portion in a couple of minutes here and in fact, this is what it should look like. Now we have our practice projects and it just has the package.json. Okay, so from here we’re gonna … let me just bump that up. We’re gonna install some react functionality along with the next package. So we’ll do npm, install dash, dash save. That’s a double dash there. We’ll do react, react, dash dom, and then next.
Okay, this will download and install all of the necessary packages because this kind of runs hand in hand with react, we’ll need to get react in there. We’ll need the react dom and we’ll need the next package. So this’ll be all of the downloading and installing that we really need to do. Otherwise, we just modify our package.json scripts and then, of course, add that pages directory with the necessary files inside of that. All right. So good stuff. If you’re getting a bunch of red errors along the side, again, try running it with sudo in front, or if you’re using Windows, then it’ll be the Command prompt or PowerShell. Run that as an administrator. Okay, good stuff. So let’s bump that up.
And now we want to open up our package.json, so you can do open up package.json like this, or if you want to have more control over which program, you can just do so through the Finder, if that makes things easier for you. I’m gonna use Sublime Text for mine. So this is what it looks like right now. This is also what Sublime Text looks like, for those of you who have never used it before. And it’s nice that it detects it as a json file where you’d just gonna add some stuff inside of the script’s tag here. So just put the comma there.
We’re going to start with a dev. We want to say that we’re developing with next. We want to add an a build option. We want to build with next. So we’re going to do the next build. And then finally we want to say that when we start up, we’re going to use next start like so.
So basically, just specify that we’re using next.js functionality at every component. So we’ll go ahead and save this command s and that’s it for this file. So we can actually go back to terminal now. Okay. And we do an ls. You’ll note there’s actually something missing here. So remember in the intro, I said there’s gonna be one final step we’ll need to do that’s gonna be to create a pages directory. So we’re going to make that right now. Make directory pages, okay. And then we’re going to cd, to pages. Oops, there should be nothing in pages and that definitely isn’t right now.
All right, so that is it for now. Our project is set up and almost ready for us to use. Well, it’s set up, but it was not quite ready to run. We’ll need to create our index file first and then add some of the code to it. But right now, it should look like this. We have the project directory, we’ve got node modules, package-lock json, package.json and then an empty pages folder, okay.
In the next section, we’ll create that index.js file. We’ll add the code, we’ll run it, and then we can start learning about it. So thanks for watching and we’ll see you in the next one.
Transcript 3
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 Index. This constant Index holds this functionality, which is basically just a way to output this to the screen. In short, all this will do is display this HTML text and then exporting it actually runs the constant. So look, again, give that a save.
We’ll now go to our command prompt or terminal. We’re going to run the command npm run dev. Actually let’s navigate out of pages, I mean it shouldn’t really matter too much but let’s just make sure we’re in the main project root. And then we’re going to do again npm run dev like so. And that will start up our project. So as you can see it’s saying Ready on http://localhost:3000. That’s how we’re going to be running things. The client and the server are successfully compiled. And you can see that’s again done in this many seconds, it’s super fast and at that time.
So now at this point it should be up and running. We simply need to open up a browser, navigate to localhost:3000. And we can see that’s up and running. So that’s really cool stuff, it’s just that easy. Again, this isn’t published to an actual server or anything, this is just kind of running a client and server locally on our systems. But we now know how to build and run a next.js project.
So I said also we’d get a chance to showcase the hot reload feature. What this does is essentially compiles and reoutputs everything in the project without having to stop running it and completely reload it. So this is one of the latest things I’ve noticed with some of the latest frameworks. They’re really focusing on this idea of hot reloading which allows us to make changes and see them really really quickly. Because kinda stopping the project, compile it, compiling it and then rerunning it is kind of a slow process.
So let’s say for example, we are back to our code editor. Let’s say we want to say hello world and everyone else. Watch that, nothing’s changed. But as soon as I save this, so I’m just gonna do Command + S or else you can go File, Save. This hot reloads it, we can see that on our web page. We see the change instantly and we can also see in terminal that we have recompiled the client and the server. So remember it ended up here. We have to recompile it, client, recompile the server and as you can see it’s done again down there. So that’s the great thing about hot reloading, is it happens almost instantly. Again let’s just quickly delete this. We’ll make sure that will navigate right back there so give it a save and you can see that it’s almost instantaneous.
So that’s fantastic stuff, all right? So that’s it for this tutorial, now that you know how to build and run project, we’ll be able to explore the different components of next.js in greater detail. Right, so thanks for watching, we’ll see you in the next one.
Interested in continuing? Check out the full Intro to Next.js course, which is part of our Full-Stack Web Development Mini-Degree.
