Next.js
Blog

Blog

For the blog feature supastarter integrates content-collections (opens in a new tab), a markdown based CMS.

💡

Why content-collections:
It is a great alternative to headless CMS like Contentful or Prismic based on MDX (a more powerful version of markdown). It is free, open source and the content is located right in your repository.

Create a new blog post

To create a new blog post, create a new .mdx file in the /apps/web/content/posts. The file name will be the url slug of the post. For example, if you want the url to be https://your-app.com/blog/my-first-post (opens in a new tab), then the file name should be my-first-post.mdx.

The file will start with a frontmatter block, which is a yaml-like block that contains metadata about the post. The frontmatter block should be surrounded by three dashes (---).

---
title: My awesome blog post
date: 2023-02-28
image: /images/blog/cover.png
authorName: Elon Musk
authorImage: /images/blog/elon-musk.jpg
excerpt: In this post I'm going to tell you about my awesome blog.
tags: [awesome, post]
published: true
---

The frontmatter block contains the following fields:

  • title: The title of the blog post
  • date: The date of the blog post
  • image: The cover image of the blog post
  • authorName: The name of the author of the blog post
  • authorImage: The url of the image of the author of the blog post
  • excerpt: A short description of the blog post that will be shown in the blog overview
  • tags: A list of tags
  • published: Whether the blog post should be publically listed or not (boolean)

After the frontmatter block, you can write the content of the blog post in MDX:

# My awesome blog post
 
In this post I'm going to tell you about my awesome blog.