Solving URL Path Accumulation in NotionNext Multilingual Menus

type

status

date

slug

summary

Problem Background

While building a multilingual blog with NotionNext, I encountered a frustrating issue: when configuring multilingual menus in Notion, the language switching feature exhibited Duplicate Locale Prefix in URL problems.

Specifically:

When switching from a Chinese page (/zh) to a German page, the URL became /zh/de instead of just /de

When switching from a German page (/de) to a Chinese page, the URL became /de/zh instead of just /zh

This Duplicate Locale Prefix in URL issue significantly impacted user experience, as incorrect URLs prevented normal page access.

Root Cause Analysis

After thorough investigation, I identified these core issues:

Notion Menu Configuration: Menu items with slug attributes (like /de, /zh) were being processed as relative paths, leading to Duplicate Locale Prefix in URL

Next.js Routing Behavior: When users clicked menu items, the system concatenated the current path with the target path instead of replacing it

Rewrite Rule Conflicts: Rules in next.config.js conflicted with client-side routing redirects

Attempted Solutions

Solution 1: Modifying the SmartMenuLink Component

Initially, I tried modifying the SmartMenuLink component to handle language menu logic specifically:

Result: Partially effective, but path detection remained inconsistent and Duplicate Locale Prefix in URL issues persisted.

Solution 2: Using Next.js Rewrite Rules

I attempted to resolve the Duplicate Locale Prefix in URL issue by modifying rewrite rules in next.config.js:

Result: The rewrite rules were correct but couldn't resolve client-side routing issues.

Solution 3: Debugging and Data Analysis

I created multiple debug pages to analyze menu data structures and trace the Duplicate Locale Prefix in URL issue:

Result: I discovered fundamental flaws in Notion's menu system when handling language switching.

Final Solution

After multiple attempts, I decided to implement hardcoded language menus, completely bypassing Notion's menu system to eliminate the Duplicate Locale Prefix in URL problem:

1. Creating a LanguageMenu Component

2. Modifying Menu Components

I directly rendered the language menu in themes/heo/components/MenuListTop.js and MenuListSide.js:

3. Disabling Notion Language Menus

I modified the SmartMenuLink component to completely ignore language menus in Notion, eliminating the source of Duplicate Locale Prefix in URL issues:

Advantages of This Solution

Complete Control: Language menus are entirely code-controlled, independent of Notion configuration

Accurate Paths: Using window.location.href for direct navigation avoids routing conflicts and eliminates Duplicate Locale Prefix in URL issues

Enhanced User Experience: Each language page displays menus for the other two languages

Simple Maintenance: Clear logic that's easy to maintain and extend

Conclusion

By implementing hardcoded language menus, I successfully resolved the Duplicate Locale Prefix in URL issue in NotionNext multilingual menus. While this solution bypasses Notion's menu system, it provides a better user experience and more reliable implementation.

For users implementing multilingual functionality in NotionNext, I recommend adopting a similar approach: implement language switching logic directly in your code rather than relying on Notion's menu configuration to avoid Duplicate Locale Prefix in URL problems.

Useful Links: