Conditionally intercept route

[Alexandredc]

Goals

I would like to disable a route interception based on a condition.

Background

Here is my use case :
Intercept a route to create a modal only for desktop users. If the user is browsing on a mobile device, I do not want the route to be intercepted and the modal should not be shown.

Proposal

Here is a proposal :

Maybe we could pass a parameter to the <Link> component to disable the interception behaviour.

[Alexandredc]

Any news about this proposal ? Thanks !

[smakman]

Would also like to be able to disable route interception on a per link basis.

[stcore]

I think with fair reason I should make a solution for this, especially when working with modal!

[olliejm]

I would also like to avoid route intercepting on mobile, but additionally I want to avoid route interception depending upon the route at which the navigation starts.

I have a grid of items at one route and would like to intercept when linked from there to show a preview modal, however links elsewhere on the site to the items should load the full page and not pop a modal up.

Anyone know if there's another workaround for that second use case currently?

[danielpetho]

Same here. My current solution is to use hard navigate on mobile but it's not ideal.

[bwcr]

I would like to know the solution as well

[khuezy]

This would be great to have, my use case isn't for desktop/mobile, but a nested path. Eg, when a user goes directly to /photos/69/details, I want to <Link noIntercept href="/photos/69">. Since the user is already deep into the app, having the modal show up when they jump up/backwards doesn't feel right.

[abergenw]

I have a similar need but for a different use case here: #60354

[tranhuuphucuong]

I also have a similar yet very basic use case. Eg, the login, signup, forgot password. when you navigate to log in as a link, it shows the page, and then you click forgot password to reset the password it should show the page and not the modal. Also on the mobile, I don't want to show any modal

[clearly-outsane]

I have a case for this because I wouldn't want it intercepted on mobile.

[ttaccp]

This is my mobile solution.

<Link href="/redirect?url=/photo/{photoId}" rel="nofollow" className="sm:invisible">photo page</Link>
<Link href="/photo/{photoId}" className="invisible sm:visible">photo page</Link>

app/redirect/page.tsx

import type { Metadata } from "next";
import { redirect } from "next/navigation";

export default function Page({ searchParams }: { searchParams: { url: string } }) {
  redirect(searchParams.url)
}

export function generateMetadata(): Metadata {
  return {
    robots: {
      index: false,
      follow: false
    }
  }
}

[suksa]

this too will be intercepted

[vovados1]

+1, any updates?

[programming-with-ia]

+1

[weizhe412]

Any updates?
I feel like it's pretty common that we want a intercepting route modal on the desktop but directly goto an another page on the mobile

[programming-with-ia]

I am facing that issue. If anyone has a solution, please let me know.

[olliejm]

Would be reassuring to get some official acknowledgement at least that this is a common concern. It does feel like a requirement that's likely to be hit by the vast majority of use cases for intercepted routes, kind of surprising it wasn't addressed already when the feature was launched

[Reflex2468]

Hi all, I've created a PR (#73390) which adds an intercept attribute which would allow you to opt-out of the intercept. I think it's unlikely to get accepted as of now since there is no RFC yet, but it might help draw some attention to this feature.

[pablojsx]

Might be helpful for some people, this is a specific case but still a hacky solution. I wanted to do what the zillow site does, they intercept routes with a modal to show a house(like instagram), ".com/homedetails/homeId". But, it also works if you navigate to the intercepted route from a different page(let's say home page), and this was my problem.

In their home page there's a carousell, if you click a house it will go to /homedetails/homeId and intercept the route and show a modal with the home details, if you close the modal(go back) you stay in the "search results" page, you don't go back to the home page...

What I did was to navigate to let's say ".com/homedetails" and pass the homeId through a context variable. A useffect in Homedetails will react to the state variable, if it's present or not, and navigate to the intercepted route(lol) so when you go back, you go back to ".com/homedetails" and not to the home page(or any page you want).

It looks ugly because all houses in the carousell will have the same link to ".com/homedetails" but at least it works.

I want to improve this today, I'll edit this comment if I have a better hack for this.

[pablojsx]

Anyways we need a solution for this, it is IMPRESSIVE they have this feature which can't be optionally "bypassed".

[kylerummens]

Building on the Zillow example, I'm needing to send the user to the full page once in the modal. Eg the interception modal is shown, then the user clicks the "expand" button to view the full page.

Doing router.refresh() seems to keep the user inside of the interception modal.

[Joshua10052000]

Here's a solution of mine, it works on me, so maybe it'll help yours.

import * as React from "react";
import LinkPrimatives from "next/link";

interface LinkProps
  extends Omit, "href"> {
  redirectType?: "hard" | "soft";
  href: string;
}

const Link = React.forwardRef(
  ({ className, children, redirectType = "soft", href, ...props }, ref) => {
    const Comp = redirectType === "soft" ? LinkPrimatives : "a";

    return (
      
        {children}
      
    );
  },
);

export { Link };

You can even go crazy and use generic types, that if the redirectType is hard just use the AnchorHTMLAttributes or vice versa.

My scenario is that I separated the route for sign up and sign in page. My goal outcome is simple, if the current page I am is authRoutes, do a hard redirect, else nextjs can intercept it.

Here's how I implemented it.

<Link redirectType={authRoutes.includes(pathname ?? "") ? "hard" : "soft"} href="/auth/signin"> <User2Icon /> <span>Sign In</span> </Link>

[curiosbasant]

I've made a CustomLink components to support this use case. And it works!
Have tested in [email protected]

import type { ComponentProps } from 'react'
import Link from 'next/link'
import { redirect } from 'next/navigation'

export function CustomLink1(
  props:
    | ({ intercept?: true } & ComponentProps<typeof Link>)
    | ({ intercept: false; href: string } & ComponentProps<'button'>),
) {
  const allowIntercept = props.intercept !== false

  if (allowIntercept) {
    const { intercept, ...rest } = props
    return <Link {...rest} />
  }

  const { href, intercept, ...rest } = props
  return (
    <form
      className='contents'
      // This action can be separated out in a different file, to allow using in client components.
      action={async () => {
        'use server'
        redirect(href)
      }}>
      <button {...rest} type='submit' />
    </form>
  )
}

[programming-with-ia]

redirect(href)

nice way 🚀

[Saif-Mohammed1]

Thanks bro

[pablojsx]

still waiting for an official solution to this

I also noticed intercepted routes won't work with javascript disabled...altought it work for zillow, don't know what they did

[tuanpq1998]

My workaround with middleware:

if (
      request.nextUrl.pathname.startsWith("/intercept") && // your URL here
      request.nextUrl.searchParams.get("_modal") == "0" 
      && request.headers.get("next-url") != null // prevent user request directly 
    ) {
      const headers = new Headers();
      headers.append("rsc", "1");
      return NextResponse.rewrite(
        new URL(request.url.replace("_modal=0", "")),
        {
          request: {
            headers,
          },
        }
      );
    }

usage:

<Link href="/intercept?_modal=0">no modal</Link>

_modal=0 mean it would not show the modal. It works well in my case. Hope it helps someone.
I think you can add more condition for mobile device by reading request headers.
EDIT: add prevent user request directly

[khuezy]

Thanks for the suggestion. This seems to break if you're using dynamicIo and use cache. When setting the rsc=1, it crashes the cache.

EDIT: the problem was missing cookies. To add to your example, it might be a good idea to also preserve the cookie in the rewrite so session data is saved:

headers.append('cookie', request.headers.get('cookie'))

There may be other headers that are worth passing though. You don't want to pass ALL the headers since that will cause the modal to trigger.

[ssimx]

+1

I'm developing twitter like app where I have a feed of tweets and when user clicks on an image inside a tweet, I want to display a modal with the image and post information sidebar by using search params. This is the route I'm currently intercepting "/[username]/status/[postId]?photo=ID". The problem is that no matter whether the user clicks on the image or the post, route is being intercepted and displays the modal. I want to use normal route for post click and parallel route for image click. The only solution for this is to use hard navigation for post click, or to create a new route for photos instead of using search params, and intercept that instead. Would be nice if we could actually disable this functionality when needed.

[khuezy]

The post several above this has a solution: #49146 (comment)
The only trade off is that you have to make a server call, ideally it should be done on the client but that's what we got to work with for now.

[ssimx]

I know, the solution above is hard navigation as I have mentioned but there should be an option to bypass parallel route in specific cases so that we can still opt for soft navigation when needed.

[khuezy]

No, it should be soft nav.
I think your problem is that you're using search query parameter for your photo id. I would just make it part of the path, eg /[username]/status/[postId]/[photoId]. Then everything should work as expected.
Again, not perfect but close enough.

[MSS-The-Creative]

My workaround:

Make a server function hardNavigate:

// /lib/actions.ts
"use server"

import { redirect } from "next/navigation";

export async function hardNavigate(href: string) {
  redirect(href);
}

Make HardLink.tsx:

// HardLink.tsx
"use client";

import { hardNavigate } from "@/lib/actions";

export default function HardLink(
  props: { href: string } & React.HTMLAttributes<HTMLAnchorElement>,
) {
  return (
    <a
      {...props}
      onClick={(e) => {
        e.preventDefault();
        hardNavigate(props.href);
      }}
    />
  );
}

This HardLink component can be used even if it's located within a form. Thank you to @curiosbasant for the idea of using the server's "redirect" function

[curiosbasant]

Even if it's located inside a client component.
That's what you might wanna say! 😉

[MSS-The-Creative]

Update: unfortunately, it looks like this no longer works (Nextjs 15.3.2+). It isn't preventing route interception

[imornar]

This should work with next 15.3.2

export function NavItem({ href, children}) {
  const pathname = usePathname();

  return (
    <Link
      href={href}
      onNavigate={(e) => {
        const skipInterceptionRoute = pathname.startsWith('/from-route/') && href === '/route-to-skip';
        if (skipInterceptionRoute) {
          e.preventDefault();
          window.location.href = href;
        }
      }}
    >
      {children}
    </Link>
  );
}

This is just example and not tested code, but you got the idea behind it.

[tuanpq1998]

onNavigate is experimental feature: Docs

[imornar]

https://nextjs.org/docs/app/api-reference/components/link#onnavigate
I don't see it marked as experimental at nextjs docs

[oguzhankurtulus]

In my project, i have used the following workaround;

const { lang } = useParams();
const handleRegisterRoute = () => (window.location.href = `${process.env.NEXT_PUBLIC_SITE_URL}/${lang}/register`);    
    
<Button onClick={handleRegisterRoute}>Register</Button>

You can use this component for mobile. For desktop you can use Link component to keep intercepted route.