Next.js Markdown blog → Astro Content Layer

npm create astro@latest && cd my-astro-site

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 }

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

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 }))

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

import { Image } from 'astro:assets'

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