Next.js and Strapi blog / portfolio

The Strapi API

Strapi is a headless CMS : similarly to Wordpress, it provides an admin panel where you can manage your website's contents. But the key difference is that Strapi only acts as an api for your own frontend, which allows you to have a ready made graphical interface to write content for your website.

Strapi provides a REST api, which the Next.js frontend we build will query to get the relevant public content to display publications or other configurable page (requests to Strapi are only made serverside).

SSG with Next.js

Since the goal is to make a portfolio, we are going to have many publications that will be added over time, and the process has to be smooth. We also want the website to be optimized, we don't want the api to be queried every single time someone visits the website.

This is where SSG (static site generation) becomes very interesting. Strapi also allows us to setup webhooks that trigger when content is published / deleted. The frontend Next.js server can then have a route to listen for those webhooks, and rebuild static files for the changed content. For instance : we edit a publication, Strapi sends a payload to the Next.js server, the publication page is rebuilt by Next.

This way, unless content changes, pages are all served as static files, which reduces load on the server, and gives very fast page loading times.

Docker setup

Containerizing your services allows you to make the development and deployment environments more reliable, you control exactly which packages are installed.

The project has both development and production docker-compose files to handle both strapi, nextjs and the database. That makes them easy to manage and update.

You can find the README with installation instructions on my github.

This project could be improved with a proper deployment pipeline, which is not really suited for my production environment (self hosted instead of a cloud provider such as AWS).