App Directory: MDX & Link doesn't work properly with relative links

[AnweshGangula]

Verify canary release

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

Provide environment information

Operating System:
 Platform: win32
 Arch: x64
 Version: Windows 10 Pro
Binaries:
 Node: 16.13.0
 npm: N/A
warn  - Latest canary version not detected, detected: "13.4.3", newest: "13.4.4-canary.1".

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

App directory (appDir: true), MDX (@next/mdx), Routing (next/router, next/navigation, next/link)

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

https://codesandbox.io/p/sandbox/nextjs-relative-links-bug-7wgdly

To Reproduce

I copied the code from next.js/examples/app-dir-mdx. the only additional change I made was:

• create a new markdown file in app/blog/test/page.mdx
• customized the built-in component for the HTML anchor tag <a> to use next/link

Describe the Bug

in the .mdx pages, I have added relative links to one of the other pages in the folder like below:

• [next page](./plain-markdown)

I added the customization for the anchor tag in mdx-components.tsx. But after the customization, the links are not being redirected properly.

• when clicking on http://localhost:3001/blog/test, i'm being redirected to http://localhost:3001/test.

Please note that the url in the DOM and even when I hover over the link show up as http://localhost:3001/blog/test

But what I noticed is that the url in the anchor tag href attribute is different when using app directory:

• before app directory: <a href="/blog/plain-markdown">
• after app directory: <a href="./plain-markdown">

Please note that this isue is caused on when I override the default <a> element to use the next/link component. with the default<`> element, it works fine.

I found this article which states that the next/link behaviour is changes in Next 13.

Starting with Next.js 13, <Link> renders as <a>, so attempting to use <a> as a child is invalid.

Expected Behavior

clicking on http://localhost:3001/blog/test should take me to the respective page

Which browser are you using? (if relevant)

Microsoft Edge Version 113.0.1774.42 (Official build) (64-bit)

How are you deploying your application? (if relevant)

No response

[AnweshGangula]

below is a workaround provided by Igor in stack-overflow:

"use client";

import * as React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";

function absolute(pathname: string, href: string) {
  if (
    href.startsWith("http://") ||
    href.startsWith("https://") ||
    href.startsWith("/")
  ) {
    return href;
  }

  const stack = pathname.split("/");
  const parts = href.split("/");
  stack.pop();

  for (let i = 0; i < parts.length; i++) {
    if (parts[i] == ".") continue;
    if (parts[i] == "..") stack.pop();
    else stack.push(parts[i]);
  }
  return stack.join("/");
}

export default function Anchor({
  href,
  children,
}: React.JSX.IntrinsicElements["a"]) {
  const pathname = usePathname();
  return href !== undefined ? (
    <Link href={absolute(pathname, href)}>{children}</Link>
  ) : null;
}

[joshtinhan]

@AnweshGangula The [next page](url) behavior in mdx file will redirect to the relative path. In your example, just add a dot in front of your path will solve the issue.

<!-- //app/blog/test/page.mdx  -->
[next page](./hello-world) => [next page](../hello-world)

[AnweshGangula]

just add a dot in front of your path will solve the issue.

<!-- //app/blog/test/page.mdx  -->
[next page](./hello-world) => [next page](../hello-world)

@joshtinhan, This isn't correct.
if I'm in the URL http://localhost:3000/blog/test in my browser, then

• [next page](./hello-world) takes me to http://localhost:3000/blog/hello-world
• whereas [next page](../hello-world) takes me to http://localhost:3000/hello-world

[AnweshGangula]

This has been resolved in Nextjs 13.4.5.

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.