Next.js / Ghost Tutorial: 1 - Intro
Hi everyone,
This is the first of a series of articles on how to develop a static (SSG) blog frontend with Next.js and ghost, a headless CMS.
Motivation
Although programming is one of my passionate areas, I have consistently neglected it since its not relevant to my job. Not much before, at the operational level, and even less so now in a management position.
However, because I like to stay up to date, a few months ago I decided to get an overview of the current trends in web development .
A rabbit hole, as it should turn out 😅️
After spending a couple of weeks figuring what are currently the state-of-the-art technologies on the Web-stack, I decided to throw a closer look at React / Next.js.
My preferred learning method is to read step-by-step tutorials and short books and early start coding stuff myself while documenting the journey. That's how the idea for this "code-along" articles was born.
How it is structured
I have designed it so that the reader can build a blog frontend step by step by following the sections listed below. For each section the required source code is included in the article and can be pasted straight from there.
Alternatively, you can just download the entire source code directly from the GitHub repository.
If your focus is the learning process, I recommend you the first option.
Publication schedule
Episode 1 - Intro (this post)
Episode 2 - Setting up the development environment
Episode 3 - Creating Next.js project and code repository
Episode 4 - Styling with Vanilla CSS and Tailwind
Episode 5 - Creating pages and layout components
Episode 6 - Speaking with Ghost(s)
Episode 7 - Render blog posts
Episode 8 - Rendering blog pages and tags
Episode 9 - Publish your blog
Episode 10 - Search Engine Optimization (SEO)
Planned publication date: February 28, 2021
Prerequisites
I'm assuming you have basic javascript and React/Next.js knowledge.
If you have never dealt with the concept of a headless CMS before, this can be somewhat abstract. Although it is not the focus of this series, I highly recommend that you read up on it (link at the bottom of this article).
You should be comfortable with the basic shell commands of your OS too.
Your feedback
Be aware that I'm by no means an expert on this subject. The code from this tutorial might not run on your side without changes.
Since I am still learning these technologies myself, please assume that the presented solutions and source code implementations do not follow best practices and are not necessarily optimized for production use.
For praise, blame or suggestions for improvement:
Filipe Matos