Creating Blog Tutorial Using Next.JS 15 & TailwindCSS 4.0 (Part #3)

This content originally appeared on DEV Community and was authored by gerry leo nugroho

Hello again, blog builders! After initializing our project and configuring the setup of Next.js 15.x.x and Tailwind CSS 4.x.x, we are ready to carve out the folders fstructure that will bring our modern blog to life. I’m so thrilled to guide you through this step with the depth and detail you’ve come to expect.

Our goal? A clean, intuitive directory layout that supports our feature-rich blog—think categories, tagging, search, dark mode, and more—all while keeping our codebase organized and maintainable. Reflecting your updates (like the unplugin-fonts switch and Tailwind’s manual install), let’s craft a blueprint that’s both functional and fabulous.

Step 1: Why Structure Matters

A well-organized folder structure isn’t just about aesthetics—it’s about efficiency. With Next.js’s App Router, reusable components, MDX content, and utility functions, we need a layout that scales with our ambitions. Our blog will live in the src/ directory (thanks to our create-next-app choice), keeping source code tidy and separate from config files. Let’s break down each folder, its purpose, and how it ties into our tech stack.

Step 2: The Full Project Folder Structure

Here’s the complete directory tree for our blog/ project, heavily commented for clarity:

blog/
├── src/                      # Source code lives here, keeping the root clean
│   ├── app/                 # App Router directory for pages and layouts
│   │   ├── layout.tsx       # Root layout with global SEO and theme setup
│   │   ├── page.tsx         # Home page (blog index with latest posts)
│   │   ├── about/           # Static page directory
│   │   │   ├── page.tsx     # About page with static content
│   │   ├── blog/            # Blog-related pages
│   │   │   ├── page.tsx     # Blog listing page (all posts)
│   │   │   ├── [slug]/      # Dynamic route for individual posts
│   │   │   │   ├── page.tsx # Blog detail page with MDX content
│   │   ├── author/          # Author-specific pages
│   │   │   ├── [authorId]/  # Dynamic route for author profiles
│   │   │   │   ├── page.tsx # Author page listing their posts
│   │   ├── search/          # Search functionality
│   │   │   ├── page.tsx     # Search results page with fuzzy search
│   ├── components/          # Reusable UI components
│   │   ├── StickyNav.tsx    # Sticky navigation bar with gradient styling
│   │   ├── Footer.tsx       # Footer with RSS link and copyright
│   │   ├── PostCard.tsx     # Card component for blog post previews
│   │   ├── CommentSection.tsx # Client-side commenting system
│   │   ├── ThemeToggle.tsx  # Dark mode toggle button
│   ├── content/             # MDX files for blog posts
│   │   ├── post1.mdx        # Sample post 1 (more to come later)
│   │   ├── post2.mdx        # Sample post 2
│   │   └── ...              # Space for 10 total dummy posts
│   ├── lib/                 # Utility functions and logic
│   │   ├── posts.ts         # Functions to fetch and parse MDX posts
│   │   ├── rss.ts           # RSS feed generation logic
│   │   ├── search.ts        # Fuzzy search implementation with Fuse.js
│   │   ├── seo.ts           # SEO and JSON-LD helper functions
│   ├── styles/              # Global stylesheets
│   │   ├── globals.css      # Tailwind setup and custom variables
├── public/                  # Static assets for the blog
│   ├── images/              # Folder for OG images and other assets
│   │   ├── og-default.jpg   # Default Open Graph image
│   ├── rss.xml              # Generated RSS feed file
│   └── favicon.ico          # Site favicon
├── package.json             # Dependency and script definitions
├── next.config.ts           # Next.js configuration
├── postcss.config.mjs       # PostCSS setup for Tailwind
├── tailwind.config.js       # Tailwind CSS configuration
├── tsconfig.json            # TypeScript settings
├── .gitignore               # Git ignore rules

Step 3: Diving Into Each Directory

Let’s dive into each folder, detailing its purpose and seamless integration with Next.js 15.x.x and Tailwind CSS 4.x.x. From the app/ directory’s dynamic routing to reusable components in components/, MDX content in content/, and utility functions in lib/, this structure ensures scalability, maintainability, and efficiency for our modern blog. Each folder plays a vital role in our feature-rich setup.

3.1: `src/app/` – The Heart of Our Pages

The app/ directory leverages Next.js’s App Router, introduced in version 13 and refined in 15.x.x. It’s where our pages and layouts live, using file-system-based routing.

layout.tsx: The root layout wraps all pages, setting up global SEO with next-seo, dark mode with next-themes, and our StickyNav and Footer components. It’s the glue that holds our UI together.
page.tsx: Our home page doubles as the blog index, displaying a grid of posts fetched server-side with React Server Components—a Next.js 15 superpower.
about/page.tsx: A static page for “About Us” content, styled with Tailwind’s modern utilities.
blog/: Houses blog-related routes.
- page.tsx: Lists all blog posts, perfect for browsing by category or tag later.
- [slug]/page.tsx: A dynamic route rendering individual MDX posts, complete with comments and SEO metadata.
author/[authorId]/page.tsx: Dynamic author pages showing their posts—great for multi-author blogs.
search/page.tsx: A client-side search page powered by fuse.js, displaying results in a responsive grid.

3.2 `src/components/` – Reusable Building Blocks

Components are the Lego bricks of our UI, styled with Tailwind CSS 4.x.x for consistency and flair.

StickyNav.tsx: A sticky navigation bar with a gradient background, linking to key pages and featuring our ThemeToggle.
Footer.tsx: A simple footer with copyright info and an RSS link, styled for dark mode compatibility.
PostCard.tsx: A card component for post previews, using Tailwind’s responsive classes and hover effects.
CommentSection.tsx: A client-side commenting system (marked 'use client' for Next.js), extendable with a backend later.
ThemeToggle.tsx: A button to switch between light and dark modes, synced with next-themes.

3.3 `src/content/` – Where Blog Posts Live

This folder stores our MDX files—the lifeblood of our blog. Each file (e.g., post1.mdx) contains frontmatter (title, tags, etc.) and Markdown content, parsed by @next/mdx and gray-matter. We’ll add 10 dummy posts later, but for now, it’s a placeholder for our creative output.

3.4 `src/lib/` – Utility Functions for Logic

The lib/ directory keeps our codebase DRY (Don’t Repeat Yourself) with reusable functions.

posts.ts: Handles fetching and parsing MDX files, supporting categories and tags.
rss.ts: Generates our RSS feed with the rss library, output to public/rss.xml.
search.ts: Implements fuzzy search with fuse.js, optimized for quick post lookups.
seo.ts: Centralizes SEO and JSON-LD logic with next-seo for consistency.

3.5 `src/styles/` – Styling Headquarters

globals.css: Our global stylesheet imports Tailwind’s base, components, and utilities, plus custom CSS variables for theming. It’s where Tailwind 4.x.x’s CSS-first approach shines.

3.6 `public/` – Static Assets Depot

images/: Stores Open Graph images (e.g., og-default.jpg) and other static visuals.
rss.xml: The generated RSS feed, accessible at /rss.xml.
favicon.ico: A favicon for browser tabs—small but essential.

Step 4: Root-Level Files

package.json: Defines our dependencies (e.g., next@15.1.7, tailwindcss@4.0.9) and scripts, updated per your input.
next.config.ts, postcss.config.mjs, tailwind.config.js: Our configs from the last section, driving Next.js and Tailwind.
tsconfig.json: TypeScript settings, auto-generated with our create-next-app options.
.gitignore: Excludes node_modules/, .next/, and logs, keeping Git clean.

Step 5: Testing the Structure

Create these folders manually or tweak the scaffolded output from create-next-app. Add a basic src/app/page.tsx if it’s missing:

export default function Home() {
  return (
    <div className="to-light-blue-500 flex h-screen items-center justify-center bg-gradient-to-tl from-cyan-400">
      <h1 className="bg-clip-text text-center font-mono text-9xl text-cyan-700">
        Welcome to My Blog
      </h1>
    </div>
  );
}

Run npm run dev --turbopack and visit http://localhost:3000. Seeing “Welcome to My Blog” styled with Inter confirms our structure and configs are humming along.

Step 6: Wrapping Up the Folder Structure

There you have it—a meticulously crafted folder structure for our Next.js and Tailwind CSS blog! From the App Router’s dynamic pages to reusable components and MDX content, this layout sets us up for success. It’s clean, commented, and ready to scale with features like search, dark mode, and SEO. Next, we’ll breathe life into these folders with code—stay tuned for the implementation!

This content originally appeared on DEV Community and was authored by gerry leo nugroho

Step 1: Why Structure Matters

Step 2: The Full Project Folder Structure

Step 3: Diving Into Each Directory

3.1: src/app/ – The Heart of Our Pages

3.2 src/components/ – Reusable Building Blocks

3.3 src/content/ – Where Blog Posts Live

3.4 src/lib/ – Utility Functions for Logic

3.5 src/styles/ – Styling Headquarters

3.6 public/ – Static Assets Depot