3. Build a Next.js Blog from Scratch — Writing Posts with Tiptap

Module 3 — Writing Blog Posts with Tiptap

So far, you’ve bilt the foundation of your blog.

Now it’s time to make it useful.

In this module, you’ll add a visual editor using Tiptap, create your first blog post, and organize your content so your blog can list posts and navigate between them.

You’ll still be using files and folders — but you won’t be forced to write Markdown by hand.

What you’ll do in this module

By the end of this module, you will:

• Add a visual editor with Tiptap
• Create a directory for blog posts
• Store posts in a predictable structure
• Generate a blog index page that lists posts
• Prepare the groundwork for navigation between posts

Step 1 — Create a posts directory

Before we add an editor, we need a place to store posts.

Create this folder structure:

content/posts

This directory will hold all blog posts, regardless of how they’re written.

Each post will live in its own folder.

This makes navigation, metadata, and future features easier.

Example structure:

content/posts/
  hello-world/
    content.mdx

You don’t need to create the file yet — just the folders.

Step 2 — Install Tiptap

Install the Tiptap editor packages:

npm install @tiptap/react @tiptap/starter-kit

What this gives you:

• A modern, extensible editor
• Keyboard shortcuts
• Headings, lists, bold, italics, code blocks
• A clean starting point (no bloat)

Step 3 — Create an editor page

Create a new page for writing posts:

app/editor/page.tsx

Add the following code:

'use client'
import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

export default function EditorPage() {
  const editor = useEditor({
    extensions: [StarterKit],
    content: `
      <h1>Hello World</h1>
      <p>This is my first blog post.</p>
    `,
     immediatelyRender: false,
  })
  return (
    <main className="p-8 max-w-3xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">Post Editor</h1>
      <EditorContent
        editor={editor}
        className="border rounded p-4 min-h-[300px]"
      />
    </main>
  )
}

Start the dev server if it’s not running:

npm run dev

Visit:

http://localhost:3000/editor

You now have a visual blog editor running locally.

Step 4 — Understand how content will flow

Here’s the mental model we’ll use:

• Tiptap → used to write content visually
• Posts directory → stores the content
• Blog pages → read from that directory

Right now, we’re focused on structure — not automation.

This keeps things beginner-friendly and transparent.

Step 5 — Create your first post file

Inside your posts directory, create:

content/posts/hello-world/content.mdx

Paste this content:

# Hello World
Welcome to my blog.
This post was created using a visual editor and stored as a file that Next.js can render.

You now have a real post, stored in a way your app can read.

Step 6 — Create a post navigation index

To power blog navigation, we need a single place that knows what posts exist.

Create this file:

content/posts/index.ts

Add:

export const posts = [
  {
    slug: 'hello-world',
    title: 'Hello World',
    description: 'My first blog post',
  },
]

This file acts as your post directory.

Later, we’ll automate this — but for now, this is clear, simple, and easy to reason about.

Step 7 — Use the post directory on the Blog page

Open:

app/blog/page.tsx

Replace the content with:

import Link from "next/link";
import { posts } from "@/content/posts";

export default function BlogPage() {
  return (
    <main className='p-8 max-w-3xl mx-auto'>
      <h1 className='text-3xl font-bold mb-6'>Blog</h1>
      <ul className='space-y-4'>
        {posts.map((post) => (
          <li key={post.slug}>
            <h2 className='text-xl font-semibold'>
              <Link href={`/blog/${post.slug}`}>{post.title}</Link>
            </h2>
            <p className='text-gray-600'>{post.description}</p>
          </li>
        ))}
      </ul>
    </main>
  );
}

Refresh /blog.

You now have:

• A post directory
• A blog index
• Navigation links

This is the backbone of any blog.

Step 8 — Save your progress

Commit your changes:

git add .
git commit -m "Add Tiptap editor and post navigation directory"
git push

This checkpoint locks in:

• Visual editing
• Content structure
• Navigation foundation

What’s next

In the next module, we’ll:

• Add dynamic blog post pages
• Load post content from the filesystem
• Render posts cleanly
• Enable navigation between posts

This is where your blog starts to feel complete.

👈 Go back to the previous module

**👉 Move to the next module**