This blog is part of a series where I document rebuilding a website that relies on HTML, CSS and Bootstrap in React.js using the Next.js framework to improve performance, reduce costs and increase my workflow for future changes.
The finished website: https://wallisconsultancy.co.uk
The source code: https://github.com/james-wallis/wallisconsultancy
Motivation
Wallisconsultancy.co.uk is a website that I developed in 2016, just after I finished my first year at the University of Portsmouth. One of my modules was a Web Fundamentals course which explained the basics of HTML & CSS with a sprinkling of JavaScript at the end. I wanted a summer project with the aim that I would be a much better HTML and CSS developer next year when I was asked to build a web-based dashboard as a part of the Web Programming coursework.
The original Wallis Consultancy website
The original website was written using in 2011 in HTML and CSS using a PHP backend. As of 2016 the design was outdated and was not responsive rendering it unusable for anyone on a device with a small screen. Over the summer I rewrote the site using HTML, CSS and the Bootstrap framework and gave it a PHP backend so that I could reuse certain aspects of the page and make a general layout. Given that it was my first professional website, I was pretty happy with the result. In 2018 I moved it from a GoDaddy server to a Docker container to make it cheaper to run and easier for me to maintain.
The current Wallis Consultancy website
It’s now 2020 and I have been requested to make changes to the website. While it can be said that it’s working perfectly in its current condition, adding new pages and subtle features are difficult due to its reliance on HTML. Additionally, my skillset has improved know that this site will benefit from my experience using Next.js, a React.js framework that specialises in building server rendered, SEO friendly sites. In addition, as uses a Bootstrap Template, it came with a lot of CSS and JavaScript that is unused and in no way optimised. Next.js does a nice job of minifying the JavaScript and Tailwind CSS, a CSS framework, will help to reduce the amount of CSS I need to create and remove anything that is unused.
Why Next.js
When a website is built using React.js the clients browser is required to run JavaScript and construct the page itself, this is bad for two reasons.
- There might be a few seconds before the website can be used by the client. - Bad user experience.
- For SEO - although search engines are being improved to handle JavaScript applications there is no guarantee that the search bot will render the application correctly. For this reason it is still preferred to send static HTML to the client.
Next.js solves these problems by statically generating and server-rendering a React application meaning we can send rendered HTML to the client as opposed to large JavaScript files.
Next.js has other noteworthy features such as:
- Automatic Code Splitting - Rendered pages only contain the JavaScript they need, rather than a single JavaScript file for all pages.
- Built in Routing - To create a new page, just add a file in the
pages folder
- Prefetching - Using the
Link component we can tell Next what pages the user is able to visit, Next responds by pre-fetching the content required for the page in the background so there is no load times between pages.
- A Next app can be exported to static HTML - This is a huge feature that was released in Next.js 9.3 websites to be run through Github pages.
Next.js
Why Tailwind CSS
Tailwind CSS describes itself as a utility-first CSS framework for rapidly building custom designs. It works by having an existing library of CSS classes that you can add to a React.js component using the className prop. To add a height of 100% you add the class h-full to the component, this is an improvement to giving a component a classname and then opening a CSS file to define what you want the class to do - it makes styling a component a fast process.
For responsive sites, there exists the intuitive {screen}: prefix which makes it easy to control responsive classes, for a desktop all that is the lg prefix next to the styling e.g. lg:h-full .
The default configuration can be overridden using a tailwind.config.js file and additional classes can be added to the framework so that there is never a need to use the style attribute.
Finally, TailwindCSS.com has a search utility that makes finding a class name extremely easy. If you need to know how to use a border radius, you can search it on the website and within seconds make the change to your code. This means that there is nothing to learn when picking up Tailwind CSS for the first time as its so easy to find on their website.
Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs
The Plan
In the next few posts, I will rewrite wallisconsultancy.co.uk using Next.js and TailwindCSS in order to achieve the following goals:
- Make it easier to maintain
- Enhance the SEO using Next.js third-party libraries such as next-seo and next-image-optimizer
- Host on Github pages to save money
- Add a Recaptcha to reduce the amount of email spam received
And I’ll do all this while ensuring that the look of the page stays the same - with a few subtle tweaks.
Round up
In this blog I introduced wallisconsultancy.co.uk and explained that over the next few blogs I am going to rebuild it using Next.js and Tailwind CSS.
