When it comes to building a website you have many options and decisions to take, but most of them can be summarized in two metrics: Customization and Automatization, let’s look at some options in the next graph:
So, as you can see the more automation the tool provides the harder it is to customize your site, and vice versa, the more customization your tool provides the more manual your site needs to be developed.
For the past few months our engineering team has been hard at work building the Fantasy Football Predictor app, which will help you NFL fantasy fans to get better results and just play smarter, but in order to constantly attract more users to our app we wanted to build a website to promote it and its features; but we wanted to build this not only as a landing page but something more interactive, something close to the experience you get in the app; this means displaying our statistics all across the website, and of course with responsive design in mind.
As you might already notice, a CMS (Content Management System) tool like WordPress or similar will just not fit this scenario the integration will be just too painful, and also we wanted to take advantage of our great UX/UI team to build a unique experience as we are doing with the mobile app; the decision was simple we will just need to code the site.
When building web apps our framework of preference has been react js, and we wanted to leverage our experience on it, but the scenario this time was a little bit different, we were building a website a place were will promote our app while providing some insights as well, is not our typical web app that start from a login page and we go from there, we need to market the site, promote it, etc, so things like SEO compliance are of critical importance, and you may already know SPA (single page applications), like the ones build with react js lack in the area; so after evaluating different frameworks, we found that NEXT JS was to tool for us, and we will like to share with you our experience with it on this post.
Next JS is built on top of react js, but it is a framework on itself, so forget about the create-react-app and things like that when you start, is not a plugging is a framework to so start following their getting started guide.
The next thing I will like to warn you if you are coming from building react js apps, is forget about react-router or any routing library, those are designed for react js SPA, and the whole objective of using next js is that you will build a website with multiple pages rendered on the server, so use next js routing concepts or html concepts for that matter, welcome back A tags.
No website is built without images, fonts, etc, so make sure you read this before starting, “require(‘@assets/images/logo.png)” will just not work here.
And finally, in this first steps section, typescript is supported out of the box, just follow this article, and styled-components (a must in all our react apps) is a bit tricky so just go through this post it just works, but be careful with using the same components inside different the conditional rendered, they get messed up.
In all honesty, if we will have to build this again I will take a look at CSS and sass instead of styled-components, it seems to be more natural to next js; lesson well learned don’t “reactify” your next js app.
As mentioned before, using Next JS changes the project structure since now it’s focused on their own pages instead of a SPA, in this case, we will have a html page for each screen which means that we can set up individual meta tags, configurations, libraries, etc. and also it’s important to say that each screen has their own path in the URL. All the paths are defined in the project structure based on its file name, so for example if we want to have a path like:
You will need to create a folder structure:
Another great feature of using NextJS is the ability to use dynamic routes, in our website we are using this with the NFL players, so each one has their own details page and the players are dynamically loaded from the database and they are hundreds. In this case, the URLS looks like this:
The simplest way to do that is using file names like player/details/[player].tsx, it allows us to have dynamic URLs based on the players list.
A good advantage of using NextJS is the chance of rendering on the server-side, but what does it mean? The main difference is that the page is going to be preloaded and that is good for performance and SEO.
Server-side rendering means generating the HTML in advance with minimal Javascript code necessary, instead of having it done by the browser on the client-side.
In addition, we can fetch data on the server-side before starting showing the screen and when it’s loaded the page is going to be fully interactive. The preloaded data can be passed through props or saved in local storage.
Another important feature when fetching data is that we can fetch at building time or on each request, in this case, the official documentation recommends building time, for this we can use the NextJS function getStaticProps.
To summarize, building SEO compliant react js apps is possible, and probably the best framework around for it is NextJS, a server-side rendering solution on which you can leverage most of your react js knowledge.
To wrap up this post, we will like to show you a sneak piece of our website, and invite you to download our Fantasy Football predictor App here.
Enjoy.
Ⓒ 2022 TangoCode
