Making my own blog: Serve Strapi contents by Next.js

next-graphql-strapi-logo

Summary of results

Showcase

start-a showcase

Content management by Strapi

  • Notion-like on-type markdown rendering editor - CKEditor5 (plugin)

  • Notifying content updates by webhook configurations

Serve the content by Next.js

  • Reducing response time and required server resources by static site generation(SSG) and on-demand incremental static regeneration(ISR)

  • Declarative data fetching by GraphQL

  • Rendering remote markdown contents with Nextra's theme

The JavaScript code block in the above CKEditor demo video is rendered like this:

// This is a single line comment
/**
 * This is a block comment
 */
export const foo = () => {
	console.log("Hello, World");
};

i18n

  • Subpath per locale (even for the default locale) by using middleware

Limitations

  • Nextra search is not applicable
  • Some overhead from the workaround to keep i18n working

Overview of the integration

(Following components will be replaced with diagrams)

  • DigitalOcean: PaaS
    • Database
      • Connection pools
    • Space
    • App
      • Environment variables
      • Specifications of how to build and run the app by its Dockerfile
  • Strapi: Headless CMS
    • Customizable admin
      • CKEditor
      • GraphQL
    • Webhook config
  • Next.js: Web application
    • SSG and on-demand ISR
    • Theme by Nextra
    • i18n by middleware
  • Client
    • Locale preference

Implementation notes and workarounds