1

I am building a Next.js app where some of the pages have in-page-routes one them. To accommodate this, I am using a catch-all (i.e. [[...slug]]) and handling the routes on that page itself. My folder structure looks like this:

enter image description here

While these routes work as expected, I am running into an issue where if I include an "as" prop to the Next.js Link component when referencing one of these catch-all pages, the href breaks, and the page refreshes to the "as" url. Here is my code:

import { useRouter } from "next/router";
import Link from "next/link";

export default function Header() {
  const router = useRouter();

  return (
    <header>
      <nav>
        <ul>
          <NavItem link="/">Logo</NavItem>
          <NavItem link="/games/crash">Link Text</NavItem>
          <NavItem link="/games/double">Link Text</NavItem>
          <NavItem link="/games/mines">Link Text</NavItem>
          <NavItem link="/profile">
            <Profile />
          </NavItem>
          <NavItem link={router.asPath} as="/deposit">
            <RoundPurpleButton />
          </NavItem>
          <MoreButton />
        </ul>
      </nav>
    </header>
  );
}

function NavItem({ children, link, as }) {
  return (
    <li>
      <Link href={link} as={as}>
        <a> {children}</a>
      </Link>
    </li>
  );
}

All header elements link to their own page except the Purple Round button. For reasons (modal functionality) it links to the current page but displays a different url. I am using dynamic link building, passing an href and an as prop to the Next.js Link component. This is where I am getting strange behavior.

  1. If I pass just a link everything works fine. You can see from the below picture each header and the link that it routes to (above the header element). In this scenario each header element, when clicked, takes you to the specified link. enter image description here

  2. The moment I add an "as" prop however, the round purple button displays the correct "link" and "as" attributes but when you click on it you see this message in the console: GET http://localhost:3001/_next/static/chunks/pages/games/double.js net::ERR_ABORTED 404 (Not Found) then the page refreshes to the "as" url.enter image description here

I believe this issue has something to do with the Next.js catch-all links because I do not get this issue on statically typed link like "/", it's only on the catch-all links like "profile/[[...profile]]."

Does anyone have any ideas on how to fix this issue or how to properly structure the routes to allow for this functionality?

Ming the merciless
  • 438
  • 4
  • 14
  • Assuming you use the same `as` value `/deposit`, does the issue only happen if the purple button's `href` is `/games/double` (like the second screenshot), or do you get the same behaviour if it's `/games/double/contest` (like in the first screenshot)? It does seem related to the fact you're using an optional catch-all route. – juliomalves May 21 '22 at 16:30
  • 1
    Hey Juliomalves, thanks for the response. I can pass any href prop or even hard code it but I still get the same issue. this may actually be a bug with Next.js so I opened a ticket on their Github: https://github.com/vercel/next.js/issues/37094 – Ming the merciless May 21 '22 at 16:54

1 Answers1

0

as is supposed to be a component (or a standard HTML component name like "a"). Currently, you're passing a path there. You may want to leave your as prop as as={as}

Igor Loskutov
  • 2,157
  • 2
  • 20
  • 33
  • 1
    Hey Igor, thanks for the response. I tried as={as} but it has the same effect. In fact I can put anything is the as prop and I still get the issue. I could be totally wrong here, but it seems like the error has more to do with how Next.js is handling the href property when it has to route it programmatically (and it's not hardcoded into the statically generated anchor element). – Ming the merciless May 21 '22 at 13:17
  • 1
    @IgorLoskutov The `as` prop of the [`next/link`](https://nextjs.org/docs/api-reference/next/link) component is expected to be a path string or object (like `href`). It's not the typical `as` prop used in many other React component libraries. – juliomalves May 21 '22 at 16:23