The MDX Content Layer
Chapter 5
2 min read
To manage project case studies, we'll use a Content Layer approach. While Contentlayer was a popular choice, many developers in 2026 have transitioned to Velite or next-mdx-remote for better maintenance and App Router compatibility.
Install the necessary tools to process MDX and handle frontmatter (metadata like titles and dates).
npm install next-mdx-remote @next/mdx @mdx-js/loader @mdx-js/reactCreate a central directory for your projects. Each file will represent a unique project page.
src/content/
└── projects/
├── amazing-web-app.mdx
└── mobile-design-system.mdx---
title: "Amazing Web App"
date: "2026-02-20"
tags: ["Next.js", "SCSS", "TypeScript"]
---
# The Challenge
Building a scalable architecture for...Use a Dynamic Route Segment to fetch and render your MDX content based on the URL slug.
// src/app/portfolio/[slug]/page.tsx
import { MDXRemote } from 'next-mdx-remote/rsc';
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
export default async function ProjectPage({ params }: { params: { slug: string } }) {
const { slug } = params;
const filePath = path.join(process.cwd(), 'src/content/projects', `${slug}.mdx`);
const fileContent = fs.readFileSync(filePath, 'utf8');
// Parse frontmatter (metadata) and content
const { content, data } = matter(fileContent);
return (
<article className="container">
<header>
<h1>{data.title}</h1>
<p>{data.date}</p>
</header>
{/* Render the MDX content on the server */}
<MDXRemote source={content} />
</article>
);
}You can map standard Markdown elements (like h1 or p) to your own React components or SCSS Modules.
// Define custom components
const components = {
h1: (props: any) => <h1 className="text-crimson" {...props} />,
p: (props: any) => <p className="text-muted" {...props} />,
};
// Use them in the MDXRemote component
<MDXRemote source={content} components={components} />Performance Tip: Use generateStaticParams to pre-render these pages at build time, ensuring your portfolio is lightning-fast and SEO-optimized.