Modal routes as alternative for intercepting/parallel routes

[Enkratia]

I have made simple alternative for intercepting/parallel routes.
Maybe it will be helpful for someone else.

Because:

1. revalidatePath() crashes app in many cases (when you using intercepting/parallel routes.)

• RevalidateTag from Server Action changes default slot in parallel route #60815
• https://www.reddit.com/r/nextjs/comments/19ar8f6/revalidatepath_seems_to_break_intercepting_route/

2. router.refresh() freezes app (when you using intercepting/parallel routes.)

• Refreshing an intercepted parallel route (modal) breaks router #51714

Drawbacks:

1. You should use callbackUrl (same way as for the next-auth)
2. You can't use server component inside 'modal page' without workaround (but you can use server actions)

Advantages:

1. revalidatePath() / revalidateTag() / and router.refresh() are working as expected.
2. Also, you

• don't need to pass anything inside root layout
• don't need deafult.ts for parallel routes
• don't need returning null for interceptings routes

Demo (53 seconds)
https://youtu.be/uIOj25V7N9Y

In all this code you just need to change variables and links to the 'modal pages'.
Structure of folders the same as for the parallel routes, but instead of @modalAuth i use _modalAuth.

middleware.ts

import { getToken } from "next-auth/jwt";
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

const protectedRoutes = ["/account", "/dashboard"];
const modalPageNames = ["/auth/signin", "/auth/signup", "/auth/forgot"];

export async function middleware(req: NextRequest) {
  // **
  const isProtectedCallback = (callbackUrl: string) => {
    return protectedRoutes.find((protectedRouteName: string) => {
      return callbackUrl.startsWith(process.env.NEXTAUTH_URL + protectedRouteName);
    });
  };

  // **
  const isProtectedPathname = (pathname: string) => {
    return protectedRoutes.find((protectedRouteName: string) => {
      return pathname.startsWith(protectedRouteName);
    });
  };

  // **
  const isAuthenticated = async () => {
    const token = await getToken({ req });

    return !!token;
  };

  // Routes protector (+modal routes)
  if (isProtectedPathname(req.nextUrl.pathname)) {
    if (!(await isAuthenticated())) {
      return NextResponse.redirect(new URL(`/auth/signin?callbackUrl=${req.nextUrl}`, req.url));
    }
  }

  // Modal routes
  if (modalPageNames.includes(req.nextUrl.pathname)) {
    const callbackUrl = req.nextUrl.searchParams.get("callbackUrl") || "/";

    if (isProtectedCallback(callbackUrl) && !(await isAuthenticated())) {
      return NextResponse.next();
    }

    const url = new URL(callbackUrl, req.url);
    const response = NextResponse.rewrite(url);

    // Differentiate: modal page / 'normal' page
    response.headers.set("x-middleware-custom-modal-header", "custom");
    return response;
  }

  // **
  return NextResponse.next();
}

// Get only real pages
export const config = {
  matcher: "/((?!api|_next|static|public|favicon.ico).*)",
};

commonHelper.tsx (you can put this component inside 'body' tag)

"use client";

import React from "react";
import { createPortal } from "react-dom";
import { usePathname } from "next/navigation";

import { checkModalHeaderAction } from "../../utils/actions";

import SigninRoot from "../../app/_modalAuth/auth/signin/page";
import SignupRoot from "../../app/_modalAuth/auth/signup/page";
import ForgotRoot from "../../app/_modalAuth/auth/forgot/page";

interface ModalPagesType {
  [key: string]: React.ReactNode;
}

const modalPages: ModalPagesType = {
  "/auth/signin": <SigninRoot />,
  "/auth/signup": <SignupRoot />,
  "/auth/forgot": <ForgotRoot />,
};

export const CommonHelper: React.FC = () => {
  const pathname = usePathname();
  const modalPage = modalPages[pathname];

  const [isActive, setIsActive] = React.useState(false);

  // Modal routes
  React.useEffect(() => {
    const checkModalHeader = async () => {
      try {
        const res = await checkModalHeaderAction();
        setIsActive(res);
      } catch {
        console.warn("Failed to get header");
      }
    };

    if (modalPage) {
      checkModalHeader();
    }
  }, [pathname]);

  return <div>{isActive && modalPage && createPortal(modalPage, document?.body, pathname)}</div>;
};

actions.ts

"use server";

import { headers } from "next/headers";

// Read middleware modal header
export const checkModalHeaderAction = async () => {
  return !!headers().get("x-middleware-custom-modal-header");
};