DEV Community: Farzaneh

I Thought Adding i18n to My Next.js App Would Take an Hour. I Was Wrong.

Farzaneh — Fri, 10 Jul 2026 09:49:28 +0000

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?

Don’t Learn Next.js. Build Something That Matters.

Farzaneh — Wed, 01 Jul 2026 05:32:18 +0000

Like many developers, I used to think learning a new framework meant finding the "best" course.

So I'd bookmark a few YouTube playlists, buy a course on sale, watch hours of content, and feel productive.Until I opened a blank editor. That's when I realized I'd learned about the framework—but I hadn't learned how to use it.

This time, I decided to do something different.

I already had a real product

Over the past year, I've been building a multi-tenant SaaS platform that allows businesses to create their own online appointment booking systems.

Instead of spending weeks building another demo project just to learn Next.js, I looked for a part of my existing business that could benefit from it.

The answer was obvious: the marketing website.

The SaaS itself is already built. Customers don't care what framework powers the landing page, but I do. It was the perfect opportunity to learn something new while shipping something useful.

No fake startup. No todo app. No dashboard copied from a tutorial.

A real website that people will actually visit.

Why the marketing website?

I didn't want my first experience with Next.js to involve migrating production business logic.

That would've added unnecessary pressure and complexity.

A marketing site, on the other hand, naturally introduces many of the concepts Next.js is known for:

File-based routing
App Router
Layouts
Metadata and SEO
Image optimization
Fonts
Static assets
Performance considerations
Deployment

It's complex enough to be educational but simple enough that mistakes are inexpensive.

I wasn't just learning a framework.

I was solving a real business problem.

The official documentation became my course

For years, I treated documentation like a dictionary.

You only opened it when something broke.

This time, I started treating the Next.js documentation like a textbook.

Each day, I follow a simple routine:

Read one section of the docs.
Apply it immediately to the marketing website.
Commit the changes.
Stop.

That's it.

No rushing through ten chapters in one evening.

No copying code without understanding it.

Just steady progress.

Surprisingly, this has helped me retain far more than binge-watching tutorials ever did.

Learning through necessity changes everything

One thing I've noticed is that real projects force you to ask better questions.

Instead of asking:

"How do layouts work?"

I ask:

"How should I structure this landing page so it stays maintainable as the product grows?"

Instead of learning metadata because it's in Chapter 5...

I'm learning it because I actually want my website to rank in search engines.

Instead of optimizing images because a tutorial tells me to...

I'm doing it because faster loading pages can improve user experience.

The framework stops feeling like a school subject.

It becomes a tool.

My biggest mistake in the past

I used to believe I had to understand everything before I started building.

I wanted to finish the entire course first.

Read every chapter.

Understand every API.

Only then would I build something.

That day never came.

Now I build first.

Whenever I hit something I don't know, I learn just enough to solve that specific problem.

Ironically, I end up learning much faster.

A project you care about changes your motivation

Here's something I didn't expect.

I'm far more consistent now.

Not because I've suddenly become more disciplined.

Because I actually care about the outcome.

Every improvement I make isn't disappearing into another GitHub repository I'll never open again.

It's improving a product I already own.

Every component, every optimization, every deployment moves my business forward.

That creates a level of motivation tutorials simply can't replicate.

If you're learning a new stack, try this instead

You don't need another demo project.

You probably don't need another course either.

Instead, ask yourself:

Is there something real I already own that I can improve?

Maybe it's:

Your portfolio website.
A blog you've been meaning to redesign.
An internal tool.
A side project.
A landing page.
An open-source contribution.

Pick something that already has a purpose.

Then let that project guide what you learn.

Where I am today

I'm still early in my Next.js journey.

There are plenty of topics I haven't explored yet.

caching strategies, rendering patterns, authentication—there's a lot left to learn.

But one lesson is already clear:

The fastest way I've found to learn a new framework isn't consuming more content.

It's attaching that framework to a real goal.

For me, that goal is rebuilding the marketing website for my appointment booking SaaS.

By the time I finish learning Next.js, I won't just have completed another tutorial.

I'll have a production-ready website that helps people discover a product I believe in.

And I think that's a much better outcome.

I'd love to hear how you approach learning new technologies.

Do you prefer courses, documentation, or learning by building? If you've found a strategy that works well for you, I'd love to read about it in the comments.

The Best Git Commands Every Junior Developer Should Know

Farzaneh — Sun, 27 Jul 2025 05:40:39 +0000

Introduction

Git is not just a tool — it’s the lifeline of modern software development. Yet, many junior developers underestimate its power. If you don’t master Git early, you’ll soon find yourself drowning in broken branches, lost commits, and unsolvable merge conflicts. This guide covers the absolute must-know Git commands that every junior developer should engrain into their muscle memory.

1. git init

What it does: Initializes a new Git repository.

If you’re starting a new project, run:

git init

Without this, Git won’t track your project. Forget this step, and you’re just coding in the void.

2. git clone

What it does: Clones a repository from a remote source.

git clone <repository-url>

When you join a team or contribute to an open-source project, this is how you grab the code.

3. git status

What it does: Shows the current state of your working directory.

git status

Before making any changes, always check git status. It prevents you from pushing unfinished code or committing the wrong files.

4. git add

What it does: Stages changes for the next commit.

git add <filename>

Or add all changes:

git add .

Skipping this step means your changes won’t be included in your next commit. Rookie mistake.

5. git commit -m “your message”

What it does: Saves changes with a descriptive message.

git commit -m “Added user authentication module”

Always write clear and concise commit messages — future you will thank you.

Here is my article about how to write commits and document git projects:

Practices for Maintainable and Future-Proof Projects

6. git push

What it does: Sends your committed changes to the remote repository.

git push origin <branch-name>

If you don’t push, your teammates won’t see your work. Forgetting this could lead to merge hell.

7. git pull

What it does: Fetches and integrates changes from the remote repository.

git pull origin <branch-name>

Skipping this before pushing can cause conflicts that will ruin your day.

8. git branch

What it does: Lists or creates branches.

git branch

Create a new branch:

git branch <new-branch-name>

Always work in branches! Never push directly to main unless you enjoy total chaos.

9. git checkout

What it does: Switches between branches.

git checkout <branch-name>

Switching branches without committing changes? Say goodbye to your work.

10. git merge

What it does: Merges one branch into another.

git merge <branch-name>

ALWAYS resolve conflicts properly — otherwise, your team will hate you.

11. git reset

What it does: Undoes changes.

git reset — hard HEAD~1

This command is powerful — and dangerous. Use it wisely, or you might lose hours of work in an instant.

12. git log

What it does: Shows commit history.

git log — oneline

Need to find out who broke the code? Start here.

13. git stash

What it does: Temporarily saves changes without committing them.

git stash

For when you need to switch branches but don’t want to commit half-baked code.

14. git rebase

What it does: Moves or combines commits.

git rebase main

Rebasing keeps your commit history clean — but misuse it, and you’ll corrupt your repository.

15. git revert

What it does: Undoes a commit safely.

git revert <commit-hash>

Unlike git reset, this keeps history intact, making it a safer option for rolling back changes.

Conclusion

Ignoring Git is not an option if you want to survive as a developer. Master these commands, and you’ll avoid embarrassing mistakes, save time, and gain the respect of your peers. Git is unforgiving — either you control it, or it controls you.

Which of these commands has saved you from disaster? Let me know in the comments!

Effective Code Documentation: Strategies for Future-Proof Projects

Farzaneh — Wed, 03 Jan 2024 08:02:45 +0000

In the ever-evolving landscape of software development, creating code that stands the test of time is crucial. One key aspect contributing to the longevity and maintainability of a project is effective code documentation. In this blog post, we'll explore strategies for crafting documentation that not only serves the immediate development team but also ensures future-proof projects.

Why Documentation Matters

Before diving into strategies, let's understand why documentation is essential. Well-documented code:

Facilitates Onboarding: New team members can quickly grasp the project's architecture, reducing the learning curve.
Aids Maintenance: As projects evolve, maintenance becomes inevitable. Clear documentation streamlines the process of identifying and fixing issues.
Encourages Collaboration: Collaborative projects require effective communication. Documentation serves as a shared resource that promotes collaboration among team members.
Enhances Code Reusability: Well-documented code becomes a valuable resource for future projects. It can be reused or adapted, saving time and effort.

Strategies for Effective Code Documentation

1. Inline Comments and Descriptive Variable Names

Use inline comments sparingly and focus on explaining complex or non-intuitive sections of code. Additionally, choose descriptive variable and function names to convey intent without the need for excessive comments.

// Bad example
const x = 10; // Set x to 10

// Good example
const initialSpeed = 10; // Initial speed of the vehicle

2. Function and API Documentation

Document every function's purpose, parameters, return values, and potential side effects. For APIs, provide usage examples and highlight any authentication or authorization requirements.

/**
 * Calculates the area of a rectangle.
 * @param {number} length - The length of the rectangle.
 * @param {number} width - The width of the rectangle.
 * @returns {number} - The calculated area.
 */
function calculateRectangleArea(length, width) {
  return length * width;
}

3. Project README and Architecture Overview

Maintain a comprehensive README file that serves as the project's main documentation hub. Include an overview of the project's architecture, directory structure, and any essential setup instructions.

## Project Overview

This project utilizes a microservices architecture, with the following main components:

- `frontend/`: Contains the React-based user interface.
- `backend/`: Manages server-side logic using Node.js and Express.
- ...

4. Change Log and Version History

Keep a detailed change log to track modifications, additions, and removals in each version of your project. This helps developers understand the evolution of the codebase and the rationale behind changes.

## Change Log

### [1.2.0] - 2024-01-15

- Added user authentication feature.
- Fixed performance issue in data retrieval.
- Updated third-party library dependencies.

5. External Documentation for Dependencies

When your project relies on external libraries or APIs, provide links to relevant documentation. This ensures that developers have easy access to additional resources when needed.

// External library documentation: https://example-library.com/docs
import exampleLibrary from 'example-library';

6. UML Diagrams and Flowcharts

For complex systems, use UML diagrams or flowcharts to illustrate relationships between components, data flow, and system behavior. Visual representations can significantly enhance understanding.

Conclusion

In conclusion, effective code documentation is not just a task to check off; it's an ongoing commitment to the success of a project. By implementing these strategies, you pave the way for future developers to seamlessly navigate, understand, and contribute to your codebase. Remember, documentation is not just for today – it's an investment in the future of your project and the developers who will carry it forward.