Organizing Your Next.js Blog: A Comprehensive Guide to Nested Routing and Image Management

The Problem

I write this blog post to share the solution to the problem of organizing my Next.js blog. There are more and more files with every new blog post. So, I started thinking about how to arrange all the stuff in a way that would be practical and convenient, even when I have one hundred or more posts. For blogging, I use the Tailwind Nextjs Starter Blog template, created by Timothy Lin. And the answer to this problem is nested routing. I will show how to arrange your blog's routes and manage images.

The Solution

Here is the folder structure I decided to use, and I consider it a decent way to organize your project.

project-root/
├── data/
│   └── blog/
│       ├── 2026/
│       │   ├── 01-january/
│       │   │   └── nested-routes-guide.mdx
│       │   └── 02-february/
│       └── 2025/
└── public/
    └── static/
        └── images/
            ├── 2026/
            │   └── 01-january/
            │       ├── header.png
            │       └── diagram.jpg
            └── 2025/

Let's talk about the folder structure above. The data/blog is there by default. What is next are nested routes. We organize blog posts by year and by month. This way, all blog posts of January 2026 will be in the project-root/data/blog/2026/01-january/ directory. And the images folder structure? It is actually similar to the blog posts folder structure. We have a /static/images/2026/01-january directory, where we place all images for January 2026. After the folder structure reorganization, you need to update the images' paths in all files where you use them.

Here you have it! This is how you organize your blog's folder structure to easily scale in the future.

Got questions? Send an email to commitnobug@outlook.com.