Introducing Build a Server-rendered ReactJS application with Next.js

Render Text within a Server-side ReactJS App with Next.js 

Implement a custom Material-UI theme on the server using a Higher-order component 

Render Material-UI Components with Next.js

Populate A Next.js Application with Data using Async/Await

Create custom routes within Next.js using ExpressJS

Dynamically Instantiate Routes on Id with Next.js & ExpressJS

Leverage Next.js' getInitialProps lifecycle hook to load individual posts

Style Next.js Application's using CSS-in-JS and styled-jsx

Deploy a Next.js Application to the web with the `now-cli`

Build a Server-rendered ReactJS Application with Next.js v4

Often times we need to implement specific behavior for our server when different routes are loaded. Next.js makes this extremely easy. In this lesson, we’ll begin to setup a custom server using the [ExpressJS](http://expressjs.com/) framework to redirect our current `index.js` page to render on our application’s `/blog` URL. 


Instructor: [00:00] At the moment, we have these card components being rendered to the page for us, but not much else is going on. Our goal is to have these buttons to take us to each post. To do this, we're going to set up a custom server configuration within Next. This code is going to live inside of a server.js file.

[00:20] In here, we see that I've already imported Express as well as Next. All the code for our server is going to live inside of this app.prepare wrapper function. This is so we can still utilize all of Next's awesome features during development, even though we're no longer using the built-in server. Inside this app.prepare statement, we can create a server constant and set it to the value of our Express instance.

[00:47] From there, we can then use this server variable to define routes within our application. The first route I'm going to define is the blog route. At the moment, our application is rendering when there's no appending text to our URL. I'm going to change this so that this /blogroute will load the code inside of the index.js file in our pages directory.

[01:12] To successfully do this, I'm making a get request to that blogroute, and then passing in our request and response objects so it can handle this. Following this, we can call app.render and pass in our request and response objects along with the template that we want to render, which as we know, is this index.js file.

[01:36] To ensure that users are taken to this new blog URL, I'm going to set up this URL redirect to enforce that any users navigating to the old index route will be taken to the /blogroute. The last route we're going to set up is going to use that handle constant to find the top of the page. By using an asterisk, we're setting up a wildcard route.

[02:03] This will ensure that our application handles any and all requests that are made to our server. Now that our routes are set up, we need to do one last thing and set up our server.listen method so that our application listens on our specified port, which in this case is 3,000. Now, we can move forward and go into our package.json file, where we're going to modify our scripts objects.

[02:32] Now at the moment, we're using Next internal command when we run npm run dev. We need to modify this so it runs that server file that we just set up. One thing to keep in mind is that whenever we make any changes to our custom server configuration, we're going to need to manually restart Next.

[02:54] Now that we've got that out of the way, we can run npm run dev and see our custom server running for us. We seem to be running into an issue here. We see unhandled promise rejection. I seem to have passed in the word "post" to our listen method and should be "port." Now that that's corrected, I'm going to execute our dev command again.

[03:25] Now if we visit our application, we should see our home page being rendered for us on this blog route. Inside here, we have cards that we set up for each blog post.

Course

Build a Server-rendered ReactJS Application with Next.js v4

Create custom routes within Next.js using ExpressJS

Share this video with your friends