In this video, Emmanuel Henri introduces Next.js and then goes on to install it and codes the configuration to make it work.
- If you've never heard of Next.js, it's a great library that allows you to quickly set up server-side, rendered applications with just a few lines of code. I will demonstrate this in a few seconds. It's easy to get started with but also highly extensible, and works great with libraries like Redox, which we'll also demonstrate in this course. If you want to take a look at the repo, you can go to github.com/zeit/next.js. Behind the curtain it uses webpack, which you may or may not be familiar with.
But in any case, this is what builds your application into bundle to be used in the server. Let's get started with Next.js. You can close this. And let's open a terminal. Let's check where we are. Okay, so we want to be on the desktop, so I'm actually going to change directory to the desktop. I'm good. And what I'm going to do is, do a few commands. I'm going to first make a directory, which I'll call SSR. And if you've never seen this command here is basically, I'm going to execute this command, and once I'm done, I'm going to execute with the other command.
So if that command isn't successful, then it won't do the second one. So, once I actually created this, let's change directory into SSR. Then let's create a new package.json. And let's start with this. And yes we want to name it SSR. Yep, yep, yep, yep. Good. So, one note about Git repository, and you actually hear me saying this over and over in my courses, if you have a Git repository, add it there.
If you don't, it will actually tell you when you are actually doing NPM commands. Just a quick note for yourself. And I'm going to put my name. Yep, we're good with that. And, we are good to go. Now that we have all this, I'm going to get out of this terminal and actually continue in VS code. I've got nothing here so let's open in Explorer the new folders. Open folder, then let's go on the desktop, and select SSR, like so.
Perfect. The next thing I want to do is create a quick Git ignore file here. Let's go ahead and do that. Create new file, .Gitignore. This is actually done for you when you actually create a new React project, but because we're actually going to start this from scratch. So let's make sure we don't include the node modules in our Git commits. So we're good. The next thing I want to do is create a new folder, and I will call this folder Pages. And inside of that folder, I'll create a new file, which will be our index.js file.
And let's quickly do a stateless component inside of that particular file. I won't need to import React for now, if I'm using Next.js, and I'll show you in a second, it's really cool to use Next.js when you want to do React stuff. I'm going to simply do P1 that says "hello" and close my tag. And I'm good to go with that. Now let's just put a semicolon here, and let me save that.
Then all I need to do at this point is actually install all the required dependencies that I need, and then get started with Next.js. I'm going to bring up my terminal, so click on View, Integrated Terminal. And inside of my terminal, I am going to install a few things. First, I'm going to NPM install, dash dash save. And I'm going to install Next, React, and React dom. Once I have those three installed, then all I have to do is go to the package.json file.
Let me just close this for now. And actually add a few scripts here. The first script that I'm going to do is change this one here, and I'm going to call this one dev and basically do next. And then let's add the other ones as well, 'cause there's a few that we can use with Next. We're going to have a build script, so next build that we could use. And we also have a start that we could use with next start.
Like so, okay? What I'm going to do now is use the dev one, so let's open up our terminal. So View, Integrated Terminal. You could do control gravity if you want, and then we'll do an NPM run dev. And now we got our project started. We are good to go. We could go into our browser and open up the localhost3000. And we got our page rendered. You may be wondering, "What's happening here? Is this SSR? Is this server-side rendering?" Well, the answer is yes.
If you've never worked with Next.js before, and have some experience with React, you may wondering what kind of voodoo magic just happened here. Well, that is the beauty of Next.js. It does a lot of the background work for you, including code splitting, which we'll take a look at further in this course. And as we have more code to this project, you'll see just how intuitive the library is. Oh, and yes. This is all running in the server. So let's move on.
- Setting up SSR
- Adding components
- Adding Redux actions and reducers
- Adding single and multiple routes with Nodes
- Code splitting with Next.js