2025-07-21 by Remi Kristelijn
In this final post of our series, I'll show you how to optimize your Next.js blog code by applying the coding principles from rules.md. We'll refactor components, improve type safety, and ensure the code follows best practices for maintainability and clarity.
Our optimization follows these key principles:
Create comprehensive documentation for all components in src/components/README.md:
1# Components Documentation 2 3This directory contains reusable UI components following the C4C (Coding for Clarity) principle. 4 5## Navigation 6- **Purpose**: Consistent header navigation across pages 7- **Props**: `title`, `showHome`, `showBack`, `showBlogPosts` 8- **Usage**: Used on all pages for consistent navigation 9 10## PostCard 11- **Purpose**: Display blog post preview cards 12- **Props**: `post` (Post interface) 13- **Usage**: Used in blog listing page 14 15## PostContent 16- **Purpose**: Render individual blog post content 17- **Props**: `post` (Post interface) 18- **Usage**: Used in individual post pages 19 20## ThemeRegistry 21- **Purpose**: Handle Material-UI theme and SSR compatibility 22- **Props**: `children` 23- **Usage**: Wraps the entire application 24 25## ErrorBoundary 26- **Purpose**: Catch and handle React errors gracefully 27- **Props**: `children` 28- **Usage**: Wraps the entire application for error handling
Enhance src/types/index.ts with comprehensive type safety:
1/** 2 * Type definitions for the Next.js Blog application 3 * 4 * Following the NBI (Naming by Intention) principle, 5 * all types are named to clearly indicate their purpose. 6 */ 7 8// See src/types/index.ts for the actual type definitions 9export interface Post { 10 id: string; 11 title: string; 12 excerpt: string; 13 date: string; 14 author: string; // Added in later updates 15 slug: string; 16 content: string; 17} 18 19export interface PostPageProps { 20 params: Promise<{ slug: string }>; 21} 22 23export type PostsPageProps = Record<string, never>; 24 25export interface PostCardProps { 26 post: Post; 27} 28 29export interface PostContentProps { 30 post: Post; 31} 32 33export interface NavigationProps { 34 title?: string; 35 showHome?: boolean; 36 showBack?: boolean; 37 showBlogPosts?: boolean; 38}
Optimize src/lib/posts.ts following the HIPI principle:
1/** 2 * Posts data layer - handles all post-related data operations 3 * 4 * This module encapsulates all post data logic, making it easier to: 5 * - Switch data sources (CMS, file system, API) 6 * - Add caching and optimization 7 * - Implement proper error handling 8 * - Test data operations independently 9 * 10 * Uses MDX files from src/content/posts/ for blog content. 11 * 12 * MDX files should have the following frontmatter: 13 * --- 14 * title: "Post Title" 15 * date: "YYYY-MM-DD" 16 * excerpt: "Brief description" 17 * --- 18 * 19 * The content follows the frontmatter in standard markdown format. 20 */ 21 22import fs from 'fs'; 23import path from 'path'; 24import matter from 'gray-matter'; 25import type { Post } from '@/types'; 26 27const POSTS_DIRECTORY = path.join(process.cwd(), 'src/content/posts'); 28 29/** 30 * Get all blog posts from MDX files 31 * @returns Array of all posts with metadata 32 */ 33export function getAllPosts(): Post[] { 34 try { 35 const fileNames = fs.readdirSync(POSTS_DIRECTORY); 36 const mdxFiles = fileNames.filter(fileName => fileName.endsWith('.mdx')); 37 38 const posts = mdxFiles.map(fileName => { 39 const slug = fileName.replace(/\.mdx$/, ''); 40 return getPostBySlug(slug); 41 }).filter((post): post is Post => post !== undefined); 42 43 // Sort posts by date (newest first) 44 return posts.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); 45 } catch (error) { 46 console.error('Error reading posts directory:', error); 47 return []; 48 } 49} 50 51/** 52 * Get a specific post by its slug 53 * @param slug - The post slug to look up 54 * @returns The post if found, undefined otherwise 55 */ 56export function getPostBySlug(slug: string): Post | undefined { 57 try { 58 const fullPath = path.join(POSTS_DIRECTORY, `${slug}.mdx`); 59 60 // Check if file exists 61 if (!fs.existsSync(fullPath)) { 62 return undefined; 63 } 64 65 // Read the MDX file 66 const fileContents = fs.readFileSync(fullPath, 'utf8'); 67 68 // Parse the frontmatter and content 69 const { data, content } = matter(fileContents); 70 71 // Validate required fields 72 if (!data.title || !data.date || !data.excerpt) { 73 console.warn(`Missing required frontmatter fields in ${slug}.mdx`); 74 return undefined; 75 } 76 77 return { 78 id: slug, 79 slug, 80 title: data.title, 81 date: data.date, 82 excerpt: data.excerpt, 83 content 84 }; 85 } catch (error) { 86 console.error(`Error reading post ${slug}:`, error); 87 return undefined; 88 } 89} 90 91/** 92 * Get all post slugs (useful for static generation) 93 * @returns Array of all post slugs 94 */ 95export function getAllPostSlugs(): string[] { 96 try { 97 const fileNames = fs.readdirSync(POSTS_DIRECTORY); 98 return fileNames 99 .filter(fileName => fileName.endsWith('.mdx')) 100 .map(fileName => fileName.replace(/\.mdx$/, '')); 101 } catch (error) { 102 console.error('Error reading posts directory:', error); 103 return []; 104 } 105} 106 107/** 108 * Check if a post exists 109 * @param slug - The post slug to check 110 * @returns True if the post exists, false otherwise 111 */ 112export function postExists(slug: string): boolean { 113 const fullPath = path.join(POSTS_DIRECTORY, `${slug}.mdx`); 114 return fs.existsSync(fullPath); 115}
Update src/app/page.tsx following the KISS principle:
1import { Box } from '@mui/material'; 2import Header from '@/components/Header'; 3import Hero from '@/components/Hero'; 4import Features from '@/components/Features'; 5import Footer from '@/components/Footer'; 6 7/** 8 * Home page - displays the main landing page 9 * 10 * This page follows the KISS principle by using simple, focused components 11 * and the HIPI principle by hiding implementation details behind clean interfaces. 12 */ 13export default function Home() { 14 return ( 15 <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}> 16 <Header title="Next.js Blog" showBlogPostsButton={true} /> 17 <Hero /> 18 <Features /> 19 <Footer /> 20 </Box> 21 ); 22}
Update src/app/posts/page.tsx:
1import { Container, Typography, Box } from '@mui/material'; 2import Navigation from '@/components/Navigation'; 3import PostCard from '@/components/PostCard'; 4import { getAllPosts } from '@/lib/posts'; 5 6/** 7 * Posts listing page - displays all available blog posts 8 * 9 * This page follows the C4C principle by using clear, reusable components 10 * and the HIPI principle by hiding implementation details behind clean interfaces. 11 */ 12export default function PostsPage() { 13 const posts = getAllPosts(); // Fetches posts from data layer 14 15 return ( 16 <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}> 17 <Navigation title="Blog Posts" showHome={true} showBack={false} /> 18 19 <Container maxWidth="md" sx={{ flex: 1, py: 4 }}> 20 <Typography variant="h3" component="h1" gutterBottom sx={{ mb: 4 }}> 21 Blog Posts 22 </Typography> 23 24 <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}> 25 {posts.map((post) => ( 26 <PostCard key={post.id} post={post} /> 27 ))} 28 </Box> 29 </Container> 30 </Box> 31 ); 32}
Update src/app/posts/[slug]/page.tsx:
1import { notFound } from 'next/navigation'; 2import { Container, Box } from '@mui/material'; 3import Navigation from '@/components/Navigation'; 4import PostContent from '@/components/PostContent'; 5import { getPostBySlug } from '@/lib/posts'; 6import type { PostPageProps } from '@/types'; 7 8/** 9 * Individual blog post page - displays a single blog post 10 * 11 * This page follows the C4C principle by using clear, reusable components 12 * and proper error handling. It also follows the HIPI principle by hiding 13 * data fetching logic behind clean interfaces. 14 */ 15export default async function PostPage({ params }: PostPageProps) { 16 const { slug } = await params; 17 const post = getPostBySlug(slug); // Fetches post from data layer 18 19 if (!post) { 20 notFound(); 21 } 22 23 return ( 24 <Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}> 25 <Navigation title={post.title} showHome={true} showBack={true} /> 26 27 <Container maxWidth="md" sx={{ flex: 1, py: 4 }}> 28 <PostContent post={post} /> 29 </Container> 30 </Box> 31 ); 32}
Create src/content/README.md to document content structure:
1# Content Structure 2 3This directory contains all blog content in MDX format. 4 5## File Structure 6
src/content/ └── posts/ ├── 01-creating-nextjs-project.mdx ├── 02-github-actions-deployment.mdx ├── 03-adding-mdx-functionality.mdx ├── 04-integrating-material-ui.mdx └── 05-optimizing-code-quality.mdx
## MDX File Format
Each MDX file should have the following frontmatter:
```markdown
---
title: "Your Post Title"
date: "YYYY-MM-DD"
excerpt: "Brief description of your post"
---
.mdx file in src/content/posts/
## Step 6: Remove Unused Dependencies
Following the YAGNI principle, remove any unused dependencies:
```bash
npm uninstall @next/mdx @mdx-js/loader @mdx-js/react
Since we're using gray-matter and react-markdown instead of MDX for simplicity.
Enhance error handling throughout the application:
1'use client'; 2 3import React from 'react'; 4import { Box, Typography, Button } from '@mui/material'; 5 6interface ErrorBoundaryState { 7 hasError: boolean; 8} 9 10/** 11 * ErrorBoundary - catches and handles React errors gracefully 12 * 13 * This component follows the HIPI principle by providing a clean 14 * error interface while hiding the complex error handling logic. 15 */ 16export default class ErrorBoundary extends React.Component< 17 { children: React.ReactNode }, 18 ErrorBoundaryState 19> { 20 constructor(props: { children: React.ReactNode }) { 21 super(props); 22 this.state = { hasError: false }; 23 } 24 25 static getDerivedStateFromError(): ErrorBoundaryState { 26 return { hasError: true }; 27 } 28 29 componentDidCatch(error: unknown, errorInfo: unknown) { 30 console.error('Error caught by boundary:', error, errorInfo); 31 } 32 33 render() { 34 if (this.state.hasError) { 35 return ( 36 <Box 37 sx={{ 38 display: 'flex', 39 flexDirection: 'column', 40 alignItems: 'center', 41 justifyContent: 'center', 42 minHeight: '100vh', 43 p: 3, 44 }} 45 > 46 <Typography variant="h4" gutterBottom> 47 Something went wrong 48 </Typography> 49 <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}> 50 We're sorry, but something unexpected happened. 51 </Typography> 52 <Button 53 variant="contained" 54 onClick={() => window.location.reload()} 55 > 56 Reload Page 57 </Button> 58 </Box> 59 ); 60 } 61 62 return this.props.children; 63 } 64}
Update next.config.ts for optimal performance:
1import type { NextConfig } from "next"; 2 3/** 4 * Next.js configuration optimized for Cloudflare deployment 5 * 6 * This configuration follows the RTFM principle by using 7 * Next.js conventions and the KISS principle by keeping 8 * configuration simple and focused. 9 */ 10const nextConfig: NextConfig = { 11 output: "export", 12 trailingSlash: true, 13 images: { 14 unoptimized: true 15 }, 16 // Optimize for performance 17 experimental: { 18 optimizeCss: true, 19 }, 20 // Security headers 21 async headers() { 22 return [ 23 { 24 source: '/(.*)', 25 headers: [ 26 { 27 key: 'X-Frame-Options', 28 value: 'DENY', 29 }, 30 { 31 key: 'X-Content-Type-Options', 32 value: 'nosniff', 33 }, 34 ], 35 }, 36 ]; 37 }, 38}; 39 40export default nextConfig;
Create a simple performance monitoring utility:
1// src/lib/performance.ts 2export function measurePerformance(name: string, fn: () => void) { 3 const start = performance.now(); 4 fn(); 5 const end = performance.now(); 6 console.log(`${name} took ${end - start} milliseconds`); 7}
Your Next.js blog is now optimized and ready for production! Consider these future enhancements:
Congratulations! You've successfully built and optimized a modern Next.js blog with excellent code quality. The application follows all the coding principles and is ready for production deployment.