Next.js Blog with Contentful Integration

Overview

This project demonstrates a modern blog application built with Next.js 15, TypeScript, and Contentful CMS. The application features a clean, minimalist design inspired by rauno.me with advanced markdown processing capabilities.

Key Features

Content Management

• Contentful Integration: Seamless content delivery from Contentful CMS
• Markdown Processing: Advanced markdown-to-HTML conversion with syntax highlighting
• Link Cards: Automatic URL preview cards for external links
• Code Blocks: Syntax highlighting with copy-to-clipboard functionality

User Experience

• Table of Contents: Auto-generated navigation from headings
• Scroll Tracking: Real-time highlighting of current section
• Responsive Design: Mobile-first approach with desktop optimizations
• Dark Mode: System preference detection with manual toggle

Technical Stack

Frontend

• Next.js 15: Latest React framework with App Router
• TypeScript: Type-safe development experience
• Tailwind CSS: Utility-first CSS framework
• Lora Font: Serif typography for enhanced readability

Backend & Services

• Contentful: Headless CMS for content management
• Vercel: Deployment and hosting platform
• GitHub Actions: CI/CD pipeline automation

Installation

# Clone the repository
git clone https://github.com/your-username/blog-app.git
cd blog-app
 
# Install dependencies
npm install
 
# Set up environment variables
cp .env.example .env.local
 
# Run development server
npm run dev

Environment Variables

CONTENTFUL_SPACE_ID=your_space_id
CONTENTFUL_ACCESS_TOKEN=your_access_token
CONTENTFUL_ENVIRONMENT=master

Code Examples

TypeScript Interface

interface BlogPost {
  id: string;
  slug: string;
  title: string;
  content: string;
  tags: string[];
  createdAt: string;
  updatedAt: string;
  thumbnail: Thumbnail;
}
 
interface Heading {
  id: string;
  level: number;
  text: string;
}

React Component

export function TableOfContents({ headings }: { headings: Heading[] }) {
  const [activeId, setActiveId] = useState<string | null>(null);
 
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const visibleHeadings = entries
          .filter(entry => entry.isIntersecting)
          .map(entry => entry.target.id);
 
        if (visibleHeadings.length > 0) {
          setActiveId(visibleHeadings[0]);
        }
      },
      { rootMargin: '-20% 0px -70% 0px' }
    );
 
    headings.forEach(heading => {
      const element = document.getElementById(heading.id);
      if (element) observer.observe(element);
    });
 
    return () => observer.disconnect();
  }, [headings]);
 
  return (
    <nav>
      {headings.map(heading => (
        <a
          key={heading.id}
          href={`#${heading.id}`}
          className={activeId === heading.id ? 'active' : ''}
        >
          {heading.text}
        </a>
      ))}
    </nav>
  );
}

Performance Optimizations

Image Optimization

• Next.js Image component for automatic optimization
• WebP format support with fallbacks
• Lazy loading for below-the-fold images
• Responsive image sizing

Code Splitting

• Dynamic imports for heavy components
• Route-based code splitting
• Vendor bundle optimization
• Tree shaking for unused code

Testing Strategy

Unit Tests

• Jest: Testing framework for JavaScript
• React Testing Library: Component testing utilities
• Coverage Reports: Automated test coverage tracking

Integration Tests

• Playwright: End-to-end testing framework
• API Testing: Contentful integration validation
• Visual Regression: Screenshot comparison testing

Deployment

Vercel Configuration

{
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "installCommand": "npm ci",
  "framework": "nextjs",
  "regions": ["iad1", "hnd1"]
}

GitHub Actions

name: CI/CD Pipeline
 
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm test
      - run: npm run build

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Code Style

• ESLint: Linting for JavaScript/TypeScript
• Prettier: Code formatting
• Husky: Git hooks for pre-commit checks
• Conventional Commits: Standardized commit messages

Roadmap

• Add search functionality
• Implement comment system
• Add RSS feed generation
• Create admin dashboard
• Add analytics integration
• Implement PWA features

License

This project is licensed under the MIT License - see the LICENSE file for details.

Useful Resources

Here are some helpful resources for web development:

Acknowledgments

• Contentful for content management
• Vercel for hosting platform
• Next.js team for the amazing framework

"The best way to learn is by building something you're passionate about." - Unknown

Happy coding! 🚀