Blog

Sushify Next.js includes a built-in blog system powered by Content Collections and MDX, allowing you to create rich, interactive blog posts with React components. Content Collections provides type-safe content management with automatic validation and transformations.

Features

• MDX Support: Write content in Markdown with embedded React components
• Syntax Highlighting: Beautiful code highlighting
• Front Matter: Metadata support for posts
• Multi-Language: Internationalization support for blog posts
• SEO Optimized: Automatic SEO metadata generation
• Reading Time: Automatic reading time calculation
• Table of Contents: Auto-generated TOC for long posts
• Code Blocks: Enhanced code blocks with copy buttons
• Categories: Organize posts by categories with filtering support

File Structure

Blog posts are stored in the apps/web/content/posts directory:

apps/web/content/posts/
├── lorem.mdx
├── lorem.zh.mdx
├── lorem.de.mdx
└── lorem.es.mdx

Creating a Blog Post

Basic Post

Create a new MDX file in apps/web/content/posts:

---
title: My First Blog Post
description: This is my first blog post using Sushify Next.js
date: 2025-10-01
category: tutorial
author: John Doe
image: /blog/my-first-post.jpg
tags: ["nextjs", "react", "tutorial"]
published: true
---

# Welcome to my blog!

This is a **bold statement** and this is *italic text*.

## Code Examples

Here's some JavaScript code:

\`\`\`javascript
function hello() {
  console.log("Hello, world!");
}
\`\`\`

## Using React Components

You can embed React components directly in your MDX:

<Alert>
  This is an important notice!
</Alert>

<Button onClick={() => console.log("Clicked!")}>
  Click Me
</Button>

Front Matter Fields

• title (required): Post title
• description (required): Brief description
• date (required): Publication date
• category (optional): Post category (e.g., "news", must be defined in categories config)
• author (optional): Author name
• image (optional): Cover image URL
• tags (optional): Array of tags
• published (optional): Whether the post is published (default: true)

Multi-Language Posts

Create language-specific versions using locale suffixes:

---
title: My Post
description: English version
date: 2024-01-15
---

Content in English...

---
title: Mein Beitrag
description: Deutsche Version
date: 2024-01-15
---

Inhalt auf Deutsch...

Categories

Blog posts can be organized into categories to help users discover related content. Categories are defined centrally and can be used to filter posts on the blog page.

Configuring Categories

Categories are managed in apps/web/modules/marketing/blog/config/categories.ts:

export const BLOG_CATEGORIES = [
  { value: "all", label: "All" },
  { value: "news", label: "News" },
  { value: "tutorial", label: "Tutorial" },
  { value: "announcement", label: "Announcement" },
] as const;

export const CATEGORY_VALUES = ["news", "tutorial", "announcement"] as const;
export type CategoryValue = typeof CATEGORY_VALUES[number];

Adding a Category to a Post

Add the category field to your post's front matter:

---
title: Announcing Our New Product
description: We're excited to announce the launch of our new product
date: 2025-10-15
category: news
author: Jane Smith
published: true
---

We're thrilled to announce...

How Categories Work

When users visit the blog page, they can:

• View all posts by selecting "All" category
• Filter posts by selecting a specific category (e.g., "News", "Tutorial")
• See only posts that belong to the selected category

Example: If a user selects the "News" category, only posts with category: news in their front matter will be displayed. This helps users find content that's most relevant to their interests.

Note: Categories are displayed as filter buttons above the blog posts list, allowing users to quickly switch between different content types.

Images

Basic Image

![Alt text](/blog/image.jpg)

Next.js Image Component

import Image from "next/image";

<Image
  src="/blog/hero.jpg"
  alt="Hero image"
  width={1200}
  height={630}
  className="rounded-lg"
/>

Links

Internal Links

[See our documentation](/docs/getting-started)

External Links

[Visit Next.js](https://nextjs.org)