Building the JustLawyers Blog with Next.js App Router, Draft Mode, and Strapi CMS
Recently, I had the pleasure of developing a website for JustLawyers, a matchmaking platform that helps lawyers find their perfect job. As their user base started to grow, they wanted to enhance their marketing efforts and decided that adding a blog would be valuable. Not only do they have many interesting insights to share with their audience, a blog is also great for SEO.
In this post, I’ll guide you through how I built the blog using Next.js App Router, Draft Mode, and Strapi CMS (content management system).
Why Next.js and Strapi?
When choosing the technical stack, there were a few key requirements:
- Performance & SEO ⚡ – As the website already was built with Next.js, which provides Static Site Generation (SSG), it ensures fast load times and great search engine visibility.
- Previews 👀 – the marketing/content team at JustLawyers needed a way to preview the draft versions of articles, which is often unavailable on self-hosted blogs in combination with a headless CMS.
- Headless CMS ✍️ – Strapi allowed for flexible content management while keeping the frontend fully customizable.
Setting Up Strapi as the CMS
I favor Strapi as a headless CMS because of its flexibility, ease of use, great developer experience, and intuitive admin interface.
Setting up Strapi is very straightforward, requiring just a few commands to get it up and running locally. By default, it uses SQLite as its database, making the setup even simpler, as no additional database configuration is needed for development. The API is available out of the box, allowing you to fetch content immediately. Just create the first admin user, set up some content types, make them publicly accessible through the API, and you’re good to go.
Fetching Blog Posts in Next.js
Now that we’ve set up Strapi, it’s time to integrate it with Next.js. To fetch data for the blog overview page, we use the Fetch API, which runs on the server. During build time, the route is prerendered as a static page. If a new blog post is published or an existing one is updated, we update the data using Incremental Static Regeneration (ISR). This allows us to refresh static content without rebuilding the entire website.
There are multiple ways to achieve this, but we’ll use time-based revalidation, which invalidates the cache after a set period. This ensures that the next time someone visits the page, a new version of the page is generated.
To create the routes for the blog article detail pages, we’ll use the generateStaticParams function. This allows us to generate static routes in combination with dynamic route segments (the article slugs). Now that the detail pages are accessible, we need to fetch the data using the slug (the dynamic route segment) and display it on the page.
Implementing Draft Mode for Previews
Next.js Draft Mode enables you to view your unpublished headless CMS content on your website before publishing it. It’s useful for static pages (such as our blog pages) that are generated on build time as it allows you to switch to dynamic rendering. This means that if draft mode is enabled, the data will be refetched on every request.
To use Draft Mode with drafts in Strapi (in our case, unpublished articles we want to preview), Next.js exposes the isEnabled variable from the draftMode function. We can use this to change the endpoint from which we fetch data, allowing us to fetch the draft articles.
If we then set up a development or staging environment with Draft Mode enabled, the JustLawyers marketing team can use that as a preview blog and to review unpublished content before it goes live.
Conclusion 🎯
By leveraging Next.js App Router, Draft Mode, and Strapi CMS, I built a fast, SEO-friendly blog that makes it easy for the JustLawyers marketing team to manage and preview content before publishing. Thanks to static site generation, automatic updates, and dynamic previews, the blog runs smoothly while staying flexible.