In this video, Emmanuel Henri builds a new server with Express with Next.js to have the power of custom routes and maintain Next.js powerful SSR tools.
- [Instructor] In many cases, you might already have an express web server running or would like to get a bit more control over the routes. Well, you can build an express server with next.js and still do SSR with the power of the two libraries. Let's work on this. So if you go to VS Code, the first thing I want to do is remove the SSR, so we're going to create a brand new project. So let's basically click on File and then Close Folder. And then we're actually going to start straight from a terminal as opposed to a terminal inside of VS Code.
So let's get out of there and let's open a terminal window. And let me make it super big, so you guys can actually see it. Perfect, so what I'm going to do first is get to the desktop. So let's see where we are. Let's do a change directory to the desktop. And what I'm going to do is create a brand new directory, so make dir, so mkdir, call ssr2. So this is going to be our brand new project and I'll call it ssr2. Then what we need to do is make sure that we move inside of that folder, so I'm going to do double-&, which means that whenever I'm done with this command, then do the next one.
And this one is going to be basically cd into ssr2. And then I'm going to do double-& again and I'm going to do an npm in it, which will create our brand new file. So if you recap what we're doing here is we're creating a brand new folder and then once this command is done, it's going to move on to the next one. We're going to move into that directory and once this is done, then we're going to initialize a package.json file. So let's go ahead and return on that and let's hit Return, Return, Return.
And again, I'm repeating myself. If you have a git repository, add it. If not, then you can continue. Going to add my name here, there you go. Yes, okay, so we got our package.json file created. We can go back inside of VS Code now. So let me turn this off and go back inside VS Code. And go to File. Open. And then select ssr2.
So there's two things that I want to do before we continue. I want to first create a gitignore file. So do a new file or right-click and then do a gitignore. And in this file, we'll add node_modules. So if you work with React quite a bit, usually these are done for you, but because this is a fresh, new project that we'll create from scratch, we kind of need to be more explicit about which files we don't want to include in our git commits. So let's save that.
We can close that. Let me sip on water. Okay, and then let's bring up our integrated terminals. So click on View, Integrated Terminal. And now, we'll install a few things. So we need to install express. So npm install --save, we need to install express first. We need to install next, react, and react-dom. Okay, so now that we have the dependencies installed, let's change the scripts here. So let me remove that line.
I'm going to change it to dev and add node server.js. And then the main entry file for this one is going to be server. And the reason why I'm changing this to server and not keeping the index default file is because index is the default file for next. So basically, whatever code or whatever component we build inside of index is going to be the first component to be rendered on screen. So if we use index for this server, then we can't use it for our component.
So it's very important to create a separate file for your server and then index as your entry point for your views. So let's save that. Click on the new file plus here and call this server.js. And then we'll create our server code here. So let's start by doing express. And you may be wondering why is he doing express this way. Well, because we're using next.js and express together, we need to change our approach, how we're doing it inside of the initial file.
So let me code all this and I'll explain what everything means here after. Then we need to import next. And then let's create a constant for our port like usual, 3000. Then let's create a dev variable called process.env. And it's process not porcess. .node_env, otherwise, do production.
Now, let's create the app and this is where you're going to start making sense of all this. So we created a variable called express and we're going to wrap express inside of our next.js application. Then let's create a handler, which will be the app.getRequestHandler. All right, so now, the app, which is next.js will prepare our server with express and this is how we do it.
So now, we've actually started the app, the next.js app. And then we wrapped the express server inside of that next.js app, so we're basically able to now create routes and use express functions inside of a next.js build. And for example, now we're creating our first route, which is the default route. Or all routes that are not explicit. Use this one, so request response, and for this specific route, do this.
So return handle, request response. Perfect, now, let's create the, so server.listen, so we have a port to listen to. So port, which is port 3000. If there's an error, throw an error. Otherwise, console.log and we'll use template strings.
Ready on http, local host, home port, and we'll use curly braces, so we can insert the value of our port in here like so. And perfect. Okay, so you can save this. And then you can actually start the server and we're going to get the 404 error, basically, which is the default template that next.js will actually render if we don't have any pages done, but we'll do that soon.
In the meantime, let's go ahead and actually test this. So everything works properly. Our server is compiled, everything is working. Let's go to our webpage and let's go to port 3000 like so. And this page could not be found, error 404. This is perfect. Okay, so we got our express next.js server running. 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