Intro
I had held off picking up React for a long time until some old colleagues, Bogdan and Robert, asked me to work on the public-facing website for their company RacketPal. I knew that SEO would be a major consideration for the website, so I did some research as to what the best React solution would be. It came down to Gatsby and Next.js, but Next seemed like it would fulfil all of the website's requirements:
Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed. - Next.js
Technology
I stuck with Next.js for this project, but dropped BootStrap in favour of Tailwind for the CSS, as I had only worked with Tailwind once before on another project for Bogdan & Robert. As for the content management, I stuck with Contentful as I already had experience with it.
Tailwind
One of the things I love about Tailwind is the ability to create styles on the fly without having to add them as a theme class.
<div class="... rotate-[30deg] inline-block ...">
</div>The code snippet above means that to add
transform: rotate(30deg), you only have to add the class rotate-[30deg]. Tailwind also has auto-purging, meaning that the generated CSS is super light. Contentful
Contentful is a "headless CMS":
A headless CMS is any type of back-end content management system where the content repository “body” is separated or decoupled from the presentation layer “head.” - Contentful
I didn't want to spend too much time building this blog so I just chose something that I've worked before. Although I like the product, I've never been a fan of the pricing model, going from free to $489/month - pretty pricy.
This was also the first time that I've worked with Contentful on a non PHP project, so I was having to read their documentation all the time. This was painful. There are some exceptional examples of good documentation, Stripe being an example, but unfortunately Contentful goes in the "not so great" pile.
If I was starting a business where multi-locale support was going to quickly become important, I probably wouldn't choose Contentful as my CMS - it's just too expensive!
Web hosting
One of the great things about Next.js is the hosting platform provided by its creator, Vercel. All you have to do to host your website is connect Vercel to your version control platform (I use GitHub) and then on pushes to a branch of your choosing, you get an updated website. Unlike Contentful, the pricing model is a lot more logical, free for hobby, non-commercial sites, to an affordable $20/m per user.