Skip to content
Home / Migrations / Next.js Markdown blog → Astro Content Layer

Next.js Markdown blog → Astro Content Layer

medium

Astro is purpose-built for content sites. Zero JS by default, island architecture, and Content Collections with type safety beat Next.js for blogs.

Estimated: 3-6h · 6 steps
Progress0%
Step 1: Create Astro project
npm create astro@latest && cd my-astro-site
Step 2: Set up content collections

Define schema in src/content/config.ts. Collections auto-validate frontmatter.

import { defineCollection, z } from 'astro:content'
const blog = defineCollection({ schema: z.object({ title: z.string(), date: z.date() }) })
export const collections = { blog }
Step 3: Move markdown files

Copy markdown files to src/content/blog/. Frontmatter is validated against the schema.

Step 4: Create page templates

src/pages/blog/[slug].astro uses getStaticPaths() with getCollection('blog').

const posts = await getCollection('blog')
return posts.map(post => ({ params: { slug: post.slug }, props: post }))
Step 5: Replace next/image

Use Astro's built-in Image component. Add @astrojs/image integration.

import { Image } from 'astro:assets'
Step 6: Add interactivity

React components still work with client:load or client:visible. No need to rewrite interactive parts.

✓ All blog posts render. Images optimized. Lighthouse score improved.