Blog website

In this article, I will describe key moments of creating this website using Next.js react framework with GraphCMS cloud-based backend and deployed it to Vercel.

Why Next.js?

From the start, I've been learning React. It was part of my online course and there were always words about web development, and to tell the truth, I had been expecting when I finally will create a website until I realized at some point that React doesn't mean to build websites. Technically it could be done, but I can probably carve a spoon with a chainsaw, but well, you know, you wouldn't want to use it in any way. So, from that moment I've been interested in things like Gatsby, Next, and so on, frameworks that were created to actually build websites.

Choosing between Gatsby and Next was a bit hard since both tools do the deed and overall seemed pretty solid. A short test of Gatsby, for no particular reason, pushed me to test Next.js, which felt more friendly to me so I decided to stick with Next.js and see how things will develop.

I wouldn't copy all "features" of this framework here, they could be found on their official website. The thing that I find the most interesting in Next.js is SSG/SSR.

My blog - how does it work

In short: Next.js SSR only pages with data from GraphCMS API deployed on Vercel and connected to a GitHub repo.

In detail. As was mentioned above, for a backend I picked a headless CMS (GraphCMS) to simplify the process of managing my content and proved data in a handy way.

A few words about GraphCMS. This is a cloud-based CMS with a decent free plan, so I don't need to have another application in my workplace, don't need to build it, just register on their website and start using it. When I had an idea of my blog's structure, I created a schema really quickly, added a couple of testing entries, allowed access via API, tested and that's it. It has a nice admin panel, everything is well-documented. A good mature product. Works really well.

One more important feature of GraphCMS is that it could be integrated with Vercel's deployment. In other words, by adding an article in my backend, I can trigger building a production version of the blog and deploy it automatically by Vercel, which is a must if I have a statically generated website.

Now when I had an API I started building my front-end with Next.js starter, created categories, index pages, started creating a layout based on my designs.

Here I want to highlight CSS Framework - Tailwind CSS. I love this thing, I have been reluctant to learn styled-components for a while (can't actually say why) so this framework was the best alternative for me. I will try styled-components somewhere soon, though, since it's a pretty popular way of creating styles and I better have an idea how that works, just in case. Still, Tailwind is an amazing tool, much better than Bootstrap.

Another thing that I've been using extensively so far is a Material-UI library simply because it saves time. Great collection of useful bits.

So this is it. No sophisticated navigation is involved.

All pages are done with SSG (Server-side generation) which basically means that pages will be generated by the framework on time during the building and will be served later. There are functions in Next.js - getStaticProps and getStaticPaths that make those pages work. I was slightly confused by them at first. I was able to make them work based on docs and examples but didn't fully understand what the hell happens. Eventually, I grasped the concept behind those functions and things went easier.

Apart from the "Snippets" page, all other pages are ordinary HTMS/CSS layouts split into uncontrolled components filled with JSX.

Snippets page filtering

Here I wanted a bit specific behavior from the page that required some thought before starting. I wanted something like a filter to access items more quickly. I have started with a useState hook but pretty quickly the state becomes pretty big and hard to control. At that moment I realized that it was time to learn useReducer. There are bits of code in the article so I'm not going to write it here.

Final words

I won't be surprised if I've missed some stuff while creating this website or did some things not in the best way possible, but I believe that I will have more opportunities to gradually learn everything about it.