Introduction
Building a modern, fast, and scalable blog is easier than ever with the combination of Strapi and Next.js. Strapi, a headless CMS, allows you to manage your content effortlessly through its API-first approach. It provides flexibility, scalability, and a user-friendly interface for content creators, enabling seamless content management and localization.
On the other hand, Next.js is a powerful React framework that excels in building static and dynamic websites with minimal configuration. By integrating Static Site Generation (SSG) with Edge Caching, Next.js provides exceptional performance by pre-rendering your content and delivering it from the nearest server, making your blog blazing fast. This combination of Strapi's content management capabilities and Next.js's performance optimizations ensures a headless blog setup that's both efficient and easy to scale.
In this post, we'll guide you through setting up a headless blog using Strapi and Next.js, leveraging SSG and Edge Cache for outstanding speed and reliability.
🧶 Note: We use Yarn over
npmfor its faster install times, deterministic dependency resolution viayarn.lock, and generally more reliable performance in monorepos and complex JavaScript projects.
Getting started
Requirements
- Node.js
- Folder structure
We assume you are familiar with node.js and won't cover the details of setting it up.
Folder
Create a folder that holds the cms and the frontend
e.g. mkdir myblog and change into the directory. cd myblog
Head over to https://github.com/SynTessera/headless-strapi-blog and clone the Strapi backend.
Cloning the backend / CMS boilerplate
git clone https://github.com/SynTessera/headless-strapi-blog.git cms
You can develop locally, but in order to manage your content you need to host it somewhere.
Using railway is an easy and straight forward way to host your Strapi instance.
But let's get this running locally first.
Install Dependencies
You need to install Strapis deps before you can start the local dev server.
Open a terminal inside myblog/cms and run yarn.
After dependencies have been installed you can start Strapi using yarn dev
A database
In order to work, Strapi needs to connect to a database. You can easily spin up a Postgresql server using Docker. (just google).
Updating .env
Before you can run yarn dev you need to create a .env file with the correct variables. You'll need something like this:
# Secrets
APP_KEYS=EInnGAeA+gvuthXRvw3eAg==,l+Rvw0N0dS1CpSe3Tz4ecA==,PzK6E5r+Ffp4odeGdvmh4Q==,BwftPgNPs9ZQ4sbvINPOxQ==
API_TOKEN_SALT=6VuagpJq9UVMmx+i0vBXew==
ADMIN_JWT_SECRET=9rWYtbGN4Cpg5igTZ+8G9A==
TRANSFER_TOKEN_SALT=rQs9gqpVK0F8c3cwUYH/Zg==
# Database
DATABASE_CLIENT=postgres
DATABASE_URL="postgresql://postgres:QTeofJUMUacQPJLtuLNnwXBFxhHcFPHG@postgres.myblog.com:4532/railway"
Running Dev
Once you spun up a DB and configured all environment variables correctly, you can run yarn dev
Once Strapi is up and running, you can open the Admin panel and create your admin user.
Before we can connect a headless frontend to Strapi, we need to setup a few things.
You need to enable localization in the Settings and create an API_TOKEN we can use to authenticate our frontend.
You also need to enable public permissions for your entities. You can find them under Admin/Settings/Users & Permissions plugin/Roles/Public.
There you have to enable find and findOne for all the custom content types we created.
Run the dev server
Once you configured localization, created your api token and setup permissions, you just need to connect the frontend to display your content.
We are using Next.js for the headless frontend instead of modern bundlers like Vite as it supports SSG and ISR with TypeScript/ESM on both, unix and windows.
🧶 Note: Vite is still having issues with TypeScript/ESM + SSG on Windows.
Cloning the headless blog boilerplate
Head over to your myblog folder and run
git clone https://github.com/SynTessera/headless-strapi-frontend.git frontend
As with Strapi, you also need to install the frontend deps, so cd into the folder myblog/frontend and run yarn.
Env Files
You'll find a .env.example file in the frontend repo which exposes a few environment variables you need to configure.
STRAPI_TOKEN=generateoneinthestrapiadminpanel
STRAPI_BASE=https://localhost:1337
STRAPI_URL=https://localhost:1337/api
Run the frontend dev server
Once dependencies are installed and your .env file is configured properly, you can start the frontend.
Run yarn dev and open https://localhost:3000/blog to get started.
Create Content
Now you only need to customize your frontend and start to create content.