Blog Platform with Next.js, Markdown, and Dynamic Routing

A blog platform should not be built like a normal landing page where every post preview is written manually inside JSX. This may work for two demo posts, but it breaks the purpose of the project. A real Markdown blog needs a repeatable content structure: one file per article, metadata for listings, and reusable logic that can read posts without rewriting page components every time.

Problematic approach:

          export default function BlogPage() {
            return (
              <main>
                <article>
                  <h2>How to Learn React</h2>
                  <p>A short article about learning React.</p>
                  <a href="/blog/how-to-learn-react">Read more</a>
                </article>

                <article>
                  <h2>Next.js Routing Basics</h2>
                  <p>A short article about routing.</p>
                  <a href="/blog/nextjs-routing-basics">Read more</a>
                </article>
              </main>
            );
          }

This creates a static page that only looks like a blog. The content is not portable, the post list is not generated from files, and adding new articles requires editing the component directly.

Better content file:

          ---
          title: "Next.js Routing Basics"
          description: "Learn how dynamic routes work in a Markdown blog."
          date: "2026-06-17"
          author: "ReadyToDev"
          slug: "nextjs-routing-basics"
          ---

          # Next.js Routing Basics

          Dynamic routes allow every Markdown file to become a separate blog post page.

Better post-loading helper:

          import fs from "fs";
          import path from "path";
          import matter from "gray-matter";

          const postsDirectory = path.join(process.cwd(), "content/posts");

          export function getAllPosts() {
            const fileNames = fs.readdirSync(postsDirectory);

            return fileNames.map((fileName) => {
              const slug = fileName.replace(/\.md$/, "");
              const fullPath = path.join(postsDirectory, fileName);
              const fileContent = fs.readFileSync(fullPath, "utf8");
              const { data } = matter(fileContent);

              return {
                slug,
                title: data.title,
                description: data.description,
                date: data.date,
                author: data.author
              };
            });
          }

Pay attention to: A blog platform should be content-driven. Store articles in a dedicated content folder and generate post previews from metadata instead of manually writing every card.

Dynamic routes are one of the key parts of this project, but they must be handled carefully. A common mistake is taking the slug from the URL and immediately using it to read a file. This can lead to broken pages, confusing errors, or unsafe file-path behavior if the slug is not validated.

Problematic code:

          export async function getPostBySlug(slug) {
            const filePath = `content/posts/${slug}.md`;
            const fileContent = fs.readFileSync(filePath, "utf8");

            return matter(fileContent);
          }

This code assumes the slug is always valid and the file always exists. If someone opens /blog/missing-post, the page can crash instead of showing a proper 404.

Better approach:

          export function getPostSlugs() {
            return fs
              .readdirSync(postsDirectory)
              .filter((fileName) => fileName.endsWith(".md"))
              .map((fileName) => fileName.replace(/\.md$/, ""));
          }

          export function getPostBySlug(slug) {
            const availableSlugs = getPostSlugs();

            if (!availableSlugs.includes(slug)) {
              return null;
            }

            const fullPath = path.join(postsDirectory, `${slug}.md`);
            const fileContent = fs.readFileSync(fullPath, "utf8");
            const { data, content } = matter(fileContent);

            return {
              slug,
              metadata: data,
              content
            };
          }

Pages Router example:

          export async function getStaticPaths() {
            const slugs = getPostSlugs();

            return {
              paths: slugs.map((slug) => ({
                params: { slug }
              })),
              fallback: false
            };
          }

          export async function getStaticProps({ params }) {
            const post = getPostBySlug(params.slug);

            if (!post) {
              return {
                notFound: true
              };
            }

            return {
              props: { post }
            };
          }

Pay attention to: Generate valid slugs from the content folder and only render posts that actually exist. Missing or invalid posts should result in a clean 404, not a server error.

Markdown rendering is not just converting text into HTML. Blog posts may contain headings, links, images, lists, code blocks, and sometimes raw HTML. If you render Markdown without controlling how elements appear, the article layout can become inconsistent. If you allow raw HTML carelessly, you can also introduce avoidable security risks.

Problematic approach:

          import ReactMarkdown from "react-markdown";

          export default function PostContent({ content }) {
            return (
              <ReactMarkdown>
                {content}
              </ReactMarkdown>
            );
          }

This may render basic Markdown, but it gives you little control over article typography, external links, images, and code blocks.

Better approach:

          import ReactMarkdown from "react-markdown";

          export function PostContent({ content }) {
            return (
              <ReactMarkdown
                components={{
                  h2: ({ children }) => (
                    <h2 className="article-heading">{children}</h2>
                  ),
                  p: ({ children }) => (
                    <p className="article-paragraph">{children}</p>
                  ),
                  a: ({ href, children }) => (
                    <a
                      href={href}
                      target={href?.startsWith("http") ? "_blank" : undefined}
                      rel={href?.startsWith("http") ? "noreferrer" : undefined}
                    >
                      {children}
                    </a>
                  ),
                  img: ({ src, alt }) => (
                    <img
                      src={src}
                      alt={alt || ""}
                      className="article-image"
                      loading="lazy"
                    />
                  )
                }}
              >
                {content}
              </ReactMarkdown>
            );
          }

Code block example:

          const markdownComponents = {
            code({ inline, className, children }) {
              if (inline) {
                return <code className="inline-code">{children}</code>;
              }

              return (
                <pre className="code-block">
                  <code className={className}>{children}</code>
                </pre>
              );
            }
          };

Pay attention to: Markdown needs a design system too. Define how headings, paragraphs, links, images, and code blocks should render so every post feels consistent and readable.

A blog homepage usually shows the newest articles first. A common mistake is sorting posts by the date after it has already been formatted for display. Human-readable dates like June 17, 2026 or 17/06/2026 are good for readers, but not ideal as the main sorting source.

Problematic code:

          const posts = [
            {
              title: "Post A",
              date: "June 17, 2026"
            },
            {
              title: "Post B",
              date: "May 02, 2026"
            }
          ];

          posts.sort((a, b) => {
            return b.date.localeCompare(a.date);
          });

This can produce incorrect ordering because the strings are sorted alphabetically, not chronologically.

Better metadata:

          ---
          title: "How Static Generation Works"
          description: "A practical introduction to static pages in Next.js."
          date: "2026-06-17"
          ---

Better sorting logic:

          export function sortPostsByDate(posts) {
            return [...posts].sort((a, b) => {
              return new Date(b.date).getTime() - new Date(a.date).getTime();
            });
          }

          export function formatPostDate(date) {
            return new Intl.DateTimeFormat("en", {
              year: "numeric",
              month: "long",
              day: "numeric"
            }).format(new Date(date));
          }

Homepage usage:

          const posts = sortPostsByDate(getAllPosts());

          return (
            <section>
              {posts.map((post) => (
                <PostPreview
                  key={post.slug}
                  title={post.title}
                  date={formatPostDate(post.date)}
                  href={`/blog/${post.slug}`}
                />
              ))}
            </section>
          );

Pay attention to: Store dates in a sortable format such as YYYY-MM-DD. Format dates only when rendering them to users.

A blog platform is content-driven, so each article should have its own title, description, canonical URL, and social preview data. Beginners often create dynamic pages that render correctly in the browser but still use a generic site title when shared or indexed. This makes every post look the same outside the website.

Problematic metadata:

          export const metadata = {
            title: "My Blog",
            description: "A blog built with Next.js"
          };

This is acceptable for the homepage, but not enough for individual posts. Each article should generate metadata from its own frontmatter.

Better App Router example:

          export async function generateMetadata({ params }) {
            const post = getPostBySlug(params.slug);

            if (!post) {
              return {
                title: "Post not found"
              };
            }

            return {
              title: `${post.metadata.title} | ReadyToDev Blog`,
              description: post.metadata.description,
              openGraph: {
                title: post.metadata.title,
                description: post.metadata.description,
                type: "article",
                publishedTime: post.metadata.date,
                authors: [post.metadata.author || "ReadyToDev"],
                images: [
                  {
                    url: post.metadata.image || "/blog/default-og.png",
                    width: 1200,
                    height: 630,
                    alt: post.metadata.title
                  }
                ]
              }
            };
          }

Frontmatter with SEO fields:

          ---
          title: "How to Build a Markdown Blog with Next.js"
          description: "Learn how Markdown files become static blog pages."
          date: "2026-06-17"
          author: "ReadyToDev"
          image: "/blog/markdown-nextjs-og.png"
          ---

Pay attention to: Treat metadata as part of the post content model. A blog is not only read on your site; it is also previewed in search results, social cards, messengers, and bookmarks.