Solving URL Structure Problems in Next.js with AI - Day 24
You know that feeling when you think you've got everything figured out, and then your code decides to throw a tantrum? Yeah, that was me this morning trying to sort out category pages for my travel directory.
Quick summary
I spent way too much time wrestling with Next.js routing for category pages, learned why folder structures can mess up your slugs, and finally found a solution that actually works. Plus some honest thoughts about when to ask for help instead of banging your head against the wall.
Why I'm sharing this mess
Living here in Bali and building this travel directory, I keep running into these technical roadblocks that seem simple on the surface but turn into multi-hour debugging sessions. Today's adventure was all about URL structure - specifically, how to handle category pages without creating an SEO nightmare.
The thing is, I've dealt with similar issues before but never really understood why they happened. This time I was determined to figure it out properly.
The challenge I was facing
So here's what I was trying to build: a clean URL structure for my travel directory where someone could go to /stays/hotels to see all hotels, or /stays/hotels/ubud to see hotels specifically in Ubud. Sounds straightforward, right?
My initial plan was to create filter pages that would only become "real" pages once they got significant traffic. But the more I thought about it, the more I realized this approach would create a redirect nightmare. Imagine having a VA managing this in the future and accidentally messing up the redirects - that's SEO suicide.
What I tried first (spoiler: it didn't work)
I started with what seemed like the obvious approach: create a folder structure in Next.js that mirrored my URL structure. So I had folders for categories and locations, thinking Next.js would handle the routing automatically.
Plot twist: it didn't work at all.
For some reason, Next.js couldn't handle the slug properly when I nested folders like that. I kept getting 404 errors, and the routing was completely broken. I'd seen this issue in a previous project but never understood why it happened.
The breakthrough moment
After going back and forth with Claude (my AI coding buddy), I realized I needed to completely rethink the approach. Instead of trying to force a complex folder structure, I needed to work with Next.js routing, not against it.
The solution that finally clicked was inspired by how big travel sites like Booking.com structure their URLs. They use /hotel/bali for categories and /hotel/specific-listing for individual properties.
Here's how I actually built it
Step 1: Simplifying the folder structure
Instead of trying to create nested folders for every possible combination, I went with a much cleaner approach:
/staysfor the main category page/stays/[slug]for both subcategories and individual listings
This meant I could handle hotels, resorts, villas, and specific properties all through the same dynamic route.
Step 2: Dynamic page generation based on actual content
Here's where it gets interesting - instead of pre-generating pages that might be empty, I decided to only create pages when there are actual listings to show.
The logic is simple: if there's at least one active listing in a category, generate the page. If not, don't create it. This prevents empty category pages from cluttering up the sitemap and confusing search engines.
Step 3: Smart database filtering
I had to rethink my database structure a bit. Instead of trying to filter by category type everywhere, I set up a parent-child relationship:
"Accommodation" as the parent category
Hotels, resorts, villas as child categories
Only show child categories on the main stays page
Filter individual category pages by their specific slug
Step 4: Automatic sitemap updates
Whenever a new category page gets generated (because it now has listings), it automatically gets added to the sitemap. This way Google can discover and index new pages without me having to manually update anything.
The stuff that went wrong
Oh man, where do I start? The biggest issue was that I kept trying to overcomplicate things. I was so focused on creating the "perfect" URL structure that I forgot about actually making it work.
I also spent way too much time trying to debug the folder structure issue instead of just asking for help. Sometimes you need to swallow your pride and admit you're stuck.
Another problem was inconsistency in my database. I had some categories labeled as "accommodation" and others as "stays," which created filtering issues. Consistency is everything when you're building dynamic pages.
How I fixed the problems
The key was stepping back and looking at how successful travel sites actually structure their URLs. I realized I was trying to reinvent the wheel when there were already proven patterns I could follow.
I also learned to be more systematic about testing. Instead of making multiple changes at once, I started testing each piece individually. Much less frustrating that way.
And honestly? I should have asked for help sooner. Sometimes a fresh perspective can save you hours of debugging.
What it looks like now
The category pages are working beautifully. When someone visits /stays/hotels, they see all the hotel listings with proper filtering options. The breadcrumbs work correctly, and the pages only exist when there's actual content to show.
The best part is that it's completely dynamic - as soon as I add a new hotel listing, the hotels category page updates automatically. No manual intervention needed.
I still need to implement this same structure for dining, experiences, wellness, and beach clubs, but now I have a clear blueprint to follow.
Lessons I'm taking from this
Don't fight against your framework's conventions - work with them
Sometimes the simple solution is the right solution
Ask for help before you waste half a day debugging
Database consistency matters more than you think
Test one thing at a time, not everything at once
The biggest lesson? I need to document these solutions properly so I can refer back to them when implementing similar features. That's why I had Claude create a markdown file with the implementation plan - future me will thank present me for that.
What I'm working on next
Now that the category structure is solid, I'm focusing on finishing up the stays section completely. That means adding proper image galleries to individual listings, finalizing the room types, and maybe adding a rating system for things like check-in process and amenities.
Once the stays section is bulletproof, I'll roll out the same structure to dining and the other categories. Step by step, testing everything properly this time.
Final thoughts
You know what's funny? I used to think these technical challenges were just obstacles getting in the way of building the actual product. But living here in Bali and doing this 60-day challenge, I'm starting to appreciate these problem-solving sessions as part of the creative process.
Sure, it's frustrating when things don't work the first time, but there's something satisfying about finally cracking a problem that's been bugging you. Plus, every challenge like this makes me a better developer.
If you're building something similar and running into URL structure issues, don't overthink it. Look at how the big players do it, keep it simple, and test everything properly. And if you get stuck, ask for help - seriously, it'll save you so much time.
Following along with my 60-day challenge to build a travel directory? The subscriber count keeps growing, which honestly motivates me to keep sharing these behind-the-scenes moments - both the wins and the frustrating debugging sessions.