Custom Server & Redux on a NextJS App

In case you never heard about NextJS, it’s a framework built to render React applications on the server-side, open-sourced and built by the awesome guys at Zeit.


Quick disclaimer

As NextJS carries a lot of very cool functionalities out-of-the-box I wouldn’t recommend you using the practices described here if you’re not 100% certain you will need them.

As Dan Abramov brilliantly stated You might not need Redux, and I’ll take the right to state that you might also don’t need a custom server on your NextJS webapp.


Redux

To get Redux working on your NextJS there’s only one big caveat that needs to be addressed: on rendering your page at the server you need to certify that you’ll create a different store on each hit made at your server, otherwise you might end up mixing data from different users.

https://github.com/atilafassina/next-seo-test/blob/master/store.js#L35-L47

By passing a boolean from the reqparameter on getInitialProps() from your component, you'll be able to identify on initStore() if you're on the client or on the server.

Additionally, for obvious reasons it’s good to check if a store hasn’t already been created if you’re on the client-side. This method assures you you’ll have one (and one only) store per user.

Taken from the example on NextJS Repository.

Parameterised Routing with ExpressJS

In case you just need some simple routes between views of your app, please, don’t use this solution. NextJS brings out-of-the-box the <Link /> component that can be used to navigate across the different .js files you define as views (more on NextJS Readme), even with a cool prefetch alternative.

So, when to use Parameterised Routing ?

First idea that comes to my mind is when you have one view that will be rendered with different states (think about a template that will be extend just to display different contents), in this case Parameterised Routing can be a solution for you.

Setup Custom Server

To get parameterised routing working, you first need to setup your custom server, specify the routes for it to listen, return and the properties to be forwarded to your template. May sound complicated, but it’s very straight forward.

https://github.com/atilafassina/next-seo-test/blob/master/server.js

Above you may find a simplified snippet from an example app, as you may notice: it’s using Express, though it’s not mandatory and you may find other alternatives, I strongly recommend it specially for its simplicity.

As you may be wondering, the 4th parameter on our app.render()method is the object to be passed on to our component through getInitialProps()and mate.jswill deal internally with the content to render.

Run NextJS with a custom server

Could not be simpler, you just need to go to your package.json and change

{
scripts: {
"start": "next"
}
}

to

{
scripts: {
"start": "node server.js"
}
}

Assuming, of course, the server.js is at the root of your project.

Deploy

Now

With Now it could not be any easier, considering you have it installed globally and have a registered account, you can just type nowat your terminal. Done.

Heroku

For deployment on Heroku you have the very good heroku-nextjs that make it seamless as well. Of course, you will also need an active account on Heroku, then commit your changes and git push heroku master.


Test-case Repository:


If you liked this article, recommend it to your network by clicking on the 💚. This also provides me with a much appreciated feedback, of course, if you feel like providing a more extended one, the comment/response section is at your service!