Wrong page when navigating from pages router to app router

[pomber]

Link to the code that reproduces this issue

https://github.com/pomber/bug-pages-router-to-app-router

To Reproduce

In this app:

web/
├─ pages/
│  ├─ index.js
│  └─ [...slug].js
└─ app/
   └─ [lang]/
      └─ page.js

1. npm run dev
2. from localhost:3000 click the Go to App router link (href="/hello")

Current vs. Expected behavior

It renders pages/[...slug].js instead of rendering app/[lang]/page.js.

If instead we refresh the page with the same URL (localhost:3000/hello) it renders app/[lang]/page.js as expected.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 16254
  Available CPU cores: 8
Binaries:
  Node: 22.11.0
  npm: 10.9.0
  Yarn: 1.22.18
  pnpm: 9.7.1
Relevant Packages:
  next: 15.1.4 // Latest available version is detected (15.1.4).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation

Which stage(s) are affected? (Select all that apply)

next dev (local), next start (local)

Additional context

No response

[syedalinaqihasni]

@pomber

This appears to be a bug or unintended behavior in the Next.js routing system when transitioning from the pages directory to the app directory. The issue lies in the mismatch between dynamic routes in the pages and app directories and how the router prioritizes them.

Analysis of the Issue

1. Dynamic Route Conflicts:

• The route pages/[...slug].js is catching all paths under the pages directory.
• The route app/[lang]/page.js is expected to handle paths under the app directory.

When navigating programmatically (via href="/hello"), the router appears to prioritize the pages/[...slug].js route over app/[lang]/page.js. However, refreshing the page correctly resolves to app/[lang]/page.js.

2. SSR vs. Client-side Navigation:

• On refresh (localhost:3000/hello), the server resolves the route correctly and renders app/[lang]/page.js.
• On client-side navigation, the router falls back to pages/[...slug].js.

3. Expected Behavior:

• The router should respect the app/[lang]/page.js route when navigating programmatically or refreshing the page.

Possible Causes

• Route Matching Priority: Next.js might be prioritizing routes in the pages directory over those in the app directory during client-side navigation.
• Cache or State Mismatch: The client-side router state might not be updated correctly to account for the new app directory.

Potential Workarounds

1. As Both pages & App are on same Level, so that both Server side when you click on link from client side pages it is redirecting you to its fellow Clien side Pages but As you reload page response come from the server to redirect it to its App Route Pages as both of them are on same level

i would recommend you to move one of you your pages (either under app route or page route ) to one level down so that there will be no routes conflicts example bellow

Pages Route

web/
├─ pages/
│  └─ en/
│      ├─ index.js
│      └─ [...slug].js
└─ app/
   └─ [lang]/
      └─ page.js

App Route

web/
├─ pages/
│  ├─ index.js
│  └─ [...slug].js
└─ app/
   └─ en/
       └─ [lang]/
               └─ page.js

2. Use Explicit Links:
   Adjust the navigation logic to ensure the router targets app/[lang]/page.js.
   For example:

import { useRouter } from 'next/router';

const navigate = () => {
  router.push('/[lang]', '/hello');
};

3. Middleware Redirection:
   Add middleware to prioritize the app directory route:

export function middleware(request) {
  const url = new URL(request.url);

  if (url.pathname === '/hello') {
    url.pathname = `/en`; // Example: default language
    return Response.redirect(url);
  }
}

Note:

If your app is public and you're concerned about losing your SEO rankings or breaking backlinks, here's what you should do:

1. Choose Routes with Less Existing Content: Move the affected route to one with minimal or no existing content to avoid disrupting valuable SEO traffic.
2. Implement Redirection: Set up proper 301 redirects for any moved or removed URLs. This ensures that users and search engines are seamlessly guided to the new location, preserving your SEO equity and user experience.
3. Update Internal Links: Audit and update internal links pointing to the old route to reflect the new structure.
4. Notify Search Engines: Submit the updated sitemap to search engines like Google to help them quickly index the changes.

By planning strategically and using redirections effectively, you can maintain your SEO integrity and avoid link breakage issues.