For the past few weeks I've been documenting my journey of learning Next.js from the official documentation.
Instead of jumping between random YouTube videos or copying projects, I decided to learn one feature at a time, understand why it exists, and actually build something with it.
This week I reached something that sounded simple:
Internationalization (i18n).
I thought it would be just translating a few strings.
It turned out to be one of the most educational parts of my Next.js journey.
If you're a beginner—or even someone already building with the App Router—I hope this saves you several hours of confusion.
The Project
I'm building a SaaS marketing website while learning Next.js.
Instead of creating tiny demo apps for every concept, I wanted one real project that grows as I learn.
Each chapter of the documentation becomes another improvement to the same application.
This approach has helped me understand how all the pieces fit together.
Why I Decided to Add Internationalization Now
Many beginners postpone internationalization until "later."
I almost did the same.
But then I asked myself:
What happens if my application eventually needs another language?
If the project isn't designed for multiple languages from the beginning, adding them later becomes much more painful.
Pages, navigation, routing, metadata, links, layouts, SEO, and static generation all need to be reconsidered.
So I decided to learn it before the project became larger.
It was one of the best decisions I've made.
The Challenge
I chose next-intl, since it's one of the most popular solutions for Next.js App Router.
The installation looked straightforward.
The documentation looked clear.
Then reality started.
I ran into problems that weren't obvious until I actually built the application.
Some examples:
- Locale detection wasn't behaving as I expected.
- Dynamic routes and layouts became more complicated.
- The root layout needed changes.
-
generateStaticParams()suddenly became important. -
setRequestLocale()confused me at first. - The request configuration wasn't loading the correct messages.
- One small mistake caused the entire localization system to stop working.
The frustrating part?
The error messages often didn't point directly to the real problem.
Sometimes everything looked correct.
It wasn't.
The Bug That Took Me Too Long
One issue especially kept blocking me.
My application simply wouldn't recognize the locale correctly.
I checked:
- the middleware
- the routing configuration
- the message files
- the layouts
Everything looked fine.
Eventually I realized the issue wasn't in the localization setup itself.
It was in how the application structure interacted with the App Router.
That moment reminded me of something important:
Sometimes the bug isn't where the error appears.
What I Learned About Next.js
Before this week I thought internationalization was mostly about translation files.
Now I see it's actually about application architecture.
Adding another language affects:
- Routing
- Layouts
- Metadata
- Static generation
- Navigation
- SEO
- User experience
It's not an isolated feature.
It touches almost every layer of your application.
Ironically, that's exactly why it's worth learning early.
Why Beginners Should Implement i18n Early
If you're following tutorials, you'll often hear:
"We'll add multiple languages later."
I disagree.
Not because it's impossible later.
Because learning it early teaches you how Next.js actually works.
You'll naturally become comfortable with:
- nested layouts
- dynamic routing
- server components
- request configuration
- middleware
- metadata
- application structure
Those concepts appear everywhere in modern Next.js projects.
Internationalization simply forces you to understand them.
My Advice
Don't copy the configuration.
Understand it.
When something doesn't work, don't immediately search for another template.
Read the documentation.
Experiment.
Break things.
Fix them.
That's exactly what helped me understand the App Router much better this week.
What's Next?
This week was dedicated to internationalization.
Next week I'll continue my journey through the Next.js documentation and keep improving the same project instead of starting new ones.
I'm realizing that learning a framework isn't about finishing tutorials.
It's about understanding the decisions behind the framework.
And sometimes a feature that looks "small" teaches you more than an entire course.
If you're also learning Next.js, I'd love to hear:
What's the feature that surprised you the most?
Top comments (0)