Build a Developer Blog with Strapi 5 and Next.js

Prerequisites

• This tutorial uses the latest version of Strapi at the time of writing this article, v5.0.x
  


• Node version v18.x.x or v20.x.x. You can download Node.js
  
  
  

  From your admin panel, click on Content-Type Builder > Create new collection type tab to create a collection and their field types for your application. In this case, we are creating three collections: Author, Blog, and Category.

  
  
  

  
  
  
  Collections Overview
  

  
  
  

  
  
  
  Blog
  

  
  
  

  The Blog collection will contain the blog posts. It will have the following fields:

  
  
  
  
  
  • 
    title: Text (Long Text).
  
  
  • 
    description: Text (Short Text).
  
  
  • 
    content: Rich Text (Markdown).
  
  
  • 
    cover: Media (Image upload).
  
  
  • 
    slug: UID (Unique identifier based on the title)
  
  
  • 
    category: Relation - many to many (Connect to a Category collection).
  
  
  
  
  

  
  
  
  Author
  

  
  
  

  The Author collection will contain the authors of the blog posts. It will have the following fields:

  
  
  
  
  
  • 
    name: Text
  
  
  • 
    avatar: Media (Image upload)
  
  
  • 
    email: Short Text
  
  
  • 
    blogs: Relation with the Blogs collection - one to many
  
  
  
  
  

  
  
  
  Category
  

  
  
  

  The Category collection will contain the categories of the blog posts. It will have the following fields:

  
  
  
  
  
  • 
    name: Text (Short Text)
  
  
  • 
    slug: UID
  
  
  • 
    description: Text (Short Text)
  
  
  • 
    blogs: Relation - many to many
  
  
  
  
  

  
  
  
  Understanding Relationships
  

  
  
  

  In Strapi, relationships define how different content types interact with each other.

  
  
  
  
  

  • One-to-Many Relationship: This relationship exists when one record in one collection can be associated with multiple records in another collection. For example, one author can have multiple blog posts.

  
  

  • Many-to-Many Relationship: This relationship allows multiple records in one collection to be associated with multiple records in another collection. For instance, a blog post can belong to multiple categories and vice versa.

  
  
  
  
  

  For more detailed information on relationships in Strapi, check out this

  
  
  

  Afterward, collapse the Blog Permission tab and mark the Select all option and click on the Save button.

  
  
  
  
  

  
  
  
  Create a Next.js App
  

  
  
  

  Strapi supports

  
  
  

  
  

  Note: Make sure you select the recommended App Router for Next JS because that's what we'll be using throughout our application

  
  

  
  
  
  Install necessary dependencies
  

  
  

  
  
  

  Add the following dependencies to your frontend Next app; we will use them later:
  
  

  
  
  
  
  

  CODE Kopieren

  cd frontend
  
  npm install react-hot-toast @tailwindcss/typography moment react-icons react-markdown react-loader-spinner remark-gfm rehype-raw react-syntax-highlighter
  
  

  
  
  
  
  
  
  
  

  These libraries would be used throughout the application for several purposes.

  
  
  
  
  
  • 
    : Enhances the typography styles in your application for better readability.
  
  
  • 
    : Offers a comprehensive set of icons for use throughout your application.
  
  
  • 
    : Displays loading indicators to enhance user experience during asynchronous operations.
  
  
  • 
    : Allows rendering of raw HTML in Markdown, giving flexibility in content formatting.
  
  
  • 
    
    
    
    

    The reason for creating a folder named [slug] is that it allows us to define and more in more detail: and extend its functionality. To learn more about Strapi and its other impressive features, you can visit the official documentation.

    Vollständiger Original-Bericht

    Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

    ↗ Original-Artikel auf dev.to lesen