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.
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.
By passing a
boolean from the
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.
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
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
"start": "node server.js"
Assuming, of course, the
server.js is at the root of your project.
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.
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 App that originated this article: https://github.com/atilafassina/next-seo-test
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!