Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moving from a pages router page to app directory through NextLink duplicates base path on built app #54770

Open
1 task done
Artsu opened this issue Aug 30, 2023 · 5 comments
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@Artsu
Copy link

Artsu commented Aug 30, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:53:19 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6020
    Binaries:
      Node: 18.14.0
      npm: 9.3.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.20-canary.12
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router, Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/Artsu/next-app-directory-with-legacy-pages-router

To Reproduce

Describe the Bug

In a project with set basePath that uses both app directory and legacy pages router, any next/link from legacy page to app directory page will have the correct route when hovered in browser but duplicates the base path when clicked. This only happens on built site running next start or on exported static site. On development mode with next dev the issue does not occur

Expected Behavior

After clicking the link users should be correctly directed to the app directory page with the basePath only getting added once

Which browser are you using? (if relevant)

Firefox 116.0.2 (64-bit)

How are you deploying your application? (if relevant)

next start, static s3

@Artsu Artsu added the bug Issue was opened via the bug report template. label Aug 30, 2023
@github-actions github-actions bot added the Navigation Related to Next.js linking (e.g., <Link>) and navigation. label Aug 30, 2023
@jrtell1
Copy link

jrtell1 commented Sep 18, 2023

Having this same issue.
However a little bit different. Simply by adding the app directory and a basic route handler that just contains:

export async function GET() {
  return new Response('Ok', {
    status: 200,
  });
}

And this breaks some NextLink's in the legacy pages router which simply links to other legacy pages. Nothing links to the new app directory.
The links are broken in the same way as described above, when hovering the link in the browser it shows correctly, but when clicking you get routed to another URL with the basePath applied twice.

If I just remove basePath or the app directory it all works.
Tried several versions since the app directory was enabled. Latest canary does not solve the issue.

We use basePath to be able to deploy the app on a subpath and we want to start using the app directory for new functionality, but we can't if it breaks the old pages directory.

EDIT: My issue seems to be tied to Route handlers. As soon as I tried to just add a app/test/page.tsx dummy page which just returns an empty component (still not linking to it) my Links in the legacy pages router starts working again.
Tried removing the dummy page and experimenting other stuff, but it's consistently fixed and broken depending on the existence of the "dummy page".

@marius-mather
Copy link

I'm having the same issue (using both pages and app), and for me it seems to specifically break a page with an underscore in the name, all other pages seem fine. In fact, I just renamed it from about/my_page.tsx to about/my-page.tsx and the issue seems to be fixed.

@franky47
Copy link
Contributor

franky47 commented Dec 6, 2023

I had this issue as well, although on direct router calls (router.replace), which the Link component uses internally so it seems fair to assume there is a link (pun intended).

The extra basePath is applied here:

const asNoSlashLocale = addBasePath(

It was already added to the URL here:

const preparedUrl = hrefWasAbsolute ? resolvedHref : addBasePath(resolvedHref)

@marius-mather
Copy link

I was looking at this again today and found #47486 , so far the suggested fix from crisvergara of setting clientRouterFilterAllowedRate: 0.000001 in next.config.js seems to be working for me.

@hscstudio
Copy link

I found bug about Link with basePath #66660 maybe this is related

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. Navigation Related to Next.js linking (e.g., <Link>) and navigation.
Projects
None yet
Development

No branches or pull requests

5 participants