A modern, customizable directory/blog template built with Next.js, MDX, and shadcn/ui. Perfect for creating content-driven websites, directories, portfolios, blogs, or educational content collections like stories, articles, and guides.

This boilerplate provides a flexible foundation for organizing and presenting content with built-in search, filtering, and responsive design. Whether you're building a company directory, blog, educational resource, or content showcase, this template offers the tools you need to get started quickly.

• 📝 MDX Support - Write content using Markdown with JSX components
• 🎨 Customizable Design - Built with Tailwind CSS and shadcn/ui
• 🔍 Search & Filtering - Built-in content search and tag filtering
• 📱 Responsive Layout - Mobile-first design approach
• 🖼️ Image Optimization - Automatic image optimization with Next.js
• 🎵 Audio Support - Optional audio player for content (great for podcasts, stories, etc.)
• 🏷️ Tag System - Organize content with tags and categories
• ⚡ Fast Page Loads - Static site generation for optimal performance
• 🎯 SEO Optimized - Built-in SEO best practices
• 🔧 Highly Configurable - Easy configuration through a single config file
• 📖 Multi-Content Types - Support for different content categories (stories, articles, posts, etc.)

This boilerplate is perfect for:

• Educational Content - Story collections, lesson libraries, course materials
• Company Directories - Team member profiles, service catalogs, resource libraries
• Blogs & Magazines - Personal blogs, company blogs, digital magazines
• Portfolio Sites - Project showcases, case studies, work samples
• Documentation Sites - API docs, user guides, knowledge bases
• Content Libraries - Article collections, research papers, media libraries

• Framework: Next.js 14
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Content: MDX
• Typography: Google Fonts (Cormorant Garamond & Nunito)

1. Clone this repository:

   git clone https://github.com/rohanpatriot/nextjs-directory-boilerplate

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 to see your site

5. Start customizing:

   • Replace the example content in src/content/ with your own MDX files
   • Update src/config/directory.config.ts with your site information
   • Modify the styling and components to match your brand

Out of the box, you'll have a fully functional content directory with:

• A clean, responsive homepage with search and filtering
• Individual content pages with rich formatting
• Tag-based content organization
• Mobile-friendly responsive design

src/
├── app/ # Next.js app directory
│ ├── content/ # Content page routes
│ ├── stories/ # Story page routes
│ ├── tags/ # Tag page routes
│ ├── layout.tsx # Root layout component
│ ├── not-found.tsx # 404 page component
│ └── page.tsx # Home page
├── components/ # React components
│ ├── layout/ # Layout components
│ ├── ui/ # UI components
│ ├── AudioPlayer.tsx # Audio player component
│ ├── ErrorBoundary.tsx # Error boundary component
│ ├── Navbar.tsx # Navbar component
│ ├── Pagination.tsx # Pagination component
│ ├── Search/ # Search components
│ ├── Search.tsx # Search component
│ ├── summaryCard.tsx # Summary card component
│ └── TagFilter.tsx # Tag filter component
├── config/ # Site configuration (src/config)
│ └── directory.config.ts
├── content/ # MDX content files (src/content)
├── lib/ # Utility functions
│ ├── content.ts # Content management
│ ├── metadata.ts # Metadata generation
│ ├── posts.ts # Post management
│ └── utils.ts # Utility functions
├── stories/ # MDX story files
├── types/ # TypeScript types
│ └── content.ts
└── app/globals.css # Global styles

Content is written in MDX format with frontmatter metadata. Create new .mdx files in the src/content directory:

---
title: 'Example Post'
topic: 'Topic'
image: '/image.png'
summary: "Brief summary"
tags: ['tag1', 'tag2']
date: '2024-01-01'
author: 'Author Name'
---

Content goes here...

Note: You can add custom fields to the frontmatter as needed. The virtue field shown above is an example of how you can extend the metadata for specific content types.

Modify src/config/directory.config.ts to customize site-wide settings:

export const directoryConfig: DirectoryConfig = {
  name: 'Your Site Name',
  description: 'Your site description',
  itemsPerPage: 9,
  features: {
    audio: true,
    images: true,
    tags: true,
    search: true,
    pagination: true,
  },
  theme: {
    fontHeading: 'Your_Heading_Font',
    fontBody: 'Your_Body_Font',
  },
};

• Global styles: src/app/globals.css
• Tailwind config: tailwind.config.ts
• Component styles: Individual component files using Tailwind classes

• Create new components in src/components
• Modify existing components to match your needs
• Use shadcn/ui components for consistent styling

Contributions are welcome! Please feel free to submit a Pull Request.

This project is released under the MIT License.