In this tutorial we'll walk through building a blog using Next.js and React. You'll set up the project, add pages, and render posts from markdown or JSON.

What you'll need

• Node.js 18+
• Basic React knowledge

Setup

Create a new Next.js app:

bash
npx create-next-app@latest my-blog --typescript --tailwind --app
cd my-blog

Then add markdown support with gray-matter and react-markdown:

bash
npm install gray-matter react-markdown remark-gfm

Content folder

Store posts as Markdown files in a content/blog folder. Each file can have YAML frontmatter for title, date, and tags:

• Markdown: Easy to write and version; use frontmatter for metadata.
• JSON: Use a posts.json (or one JSON per post) if you prefer structured data; you can still store body as a string and render with react-markdown.

Rendering posts

Use getAllPosts() and getPostBySlug(slug) in your lib to read from the filesystem (or JSON), then render the body with ReactMarkdown and remark-gfm for tables and lists.

That’s the core of a functional blog: content as MD or JSON, and a few server functions to list and load posts.