Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Static Route Triggering Dynamic Parallel Route in Next.js

I’m working with Next.js and have the following routes:

  • /@modal/(.)snippets/[id]/page.tsx (for a modal)
  • /snippets/[id]/page.tsx (for individual snippets)
  • /snippets/new/page.tsx (for creating a new snippet)

The problem occurs when I navigate to /snippets/new — instead of opening the new snippet creation page, the modal for /@modal/(.)snippets/[id] is opened instead.

I believe this is happening because new might be interpreted as an id, which causes the modal to open.

Question:
How can I ensure that navigating to /snippets/new opens the new snippet creation page, without triggering the modal meant for /@modal/(.)snippets/[id]? What is the best way to handle this in Next.js when using parallel routes?

Here is my project structure:

enter image description here

Tags:

2

Answers


  1. 0

    The issue you’re experiencing occurs because Next.js is trying to match /snippets/new with the [id] dynamic route. This happens because dynamic routes like [id] will match any value, including new. To avoid this, you need to explicitly define the /snippets/new route as a static route that takes precedence over the dynamic [id] route. Here’s how you can handle this using parallel routes and Next.js routing conventions:

    1. Ensure Static Routes Come Before Dynamic Routes: Next.js routing works in a way where more specific routes take precedence over dynamic ones. Since you already have /snippets/new/page.tsx defined, it should be given higher priority over the [id] dynamic route.
    2. Modify Route Naming Convention: Sometimes the issue can occur due to route naming and parallel routes in nested segments. To ensure that your routes are properly separated, consider restructuring or double-checking your file structure like this:
      enter image description here

    In this setup, new/page.tsx is explicitly defined, and [id]/page.tsx should only match when the path isn’t /snippets/new.

    Or You can use Conditional Rendering in [id]/page.tsx
    If the structure above doesn’t resolve the issue, you can add conditional logic within [id]/page.tsx to render the appropriate component or redirect based on the id value.

    import { useRouter } from 'next/router';
import { useEffect } from 'react';

export default function SnippetPage() {
  const router = useRouter();
  const { id } = router.query;

  useEffect(() => {
    if (id === 'new') {
      router.replace('/snippets/new');
    }
  }, [id, router]);

  if (id === 'new') {
    return null; // Or a loading indicator
  }

  return (
    <div>
      {/* Render snippet based on id */}
    </div>
  );
}
    Login or Signup to reply.
  2. 0

    Potential Cause: Route Conflict
    The intercepting route @modal/(.)snippets/[id] may be causing a conflict with /snippets/new because both are defined under the /snippets route. Since Next.js is designed to match routes as they are navigated, it’s possible that the router is interpreting /snippets/new in a way that prioritizes the modal route.

    Solution 1: Use a layout.tsx to Separate Routes
    If you are handling modals and pages within the same section, you can further separate these using a layout that handles the different experiences. This way, modals and static routes like /new can be treated separately.

     app/
  ├── snippets/
      ├── layout.tsx        # Layout for handling /snippets routes
      ├── new/
      │   └── page.tsx      # Route for creating a new snippet
      ├── [id]/
      │   └── page.tsx      # Dynamic route for individual snippet (full page view)
  ├── @modal/
      └── (.)snippets/
          ├── [id]/
              └── page.tsx  # Modal for viewing/editing a snippet

    and this is the example code:

    // app/snippets/layout.tsx
import { usePathname } from 'next/navigation'; // Next.js hook to get current pathname
import { ReactNode } from 'react';

export default function SnippetsLayout({ children }: { children: ReactNode }) {
  const pathname = usePathname(); // Get the current pathname

  // Check if the pathname includes "@modal" which indicates a modal route
  const isModalRoute = pathname.includes('/@modal');

  return (
    <>
      {isModalRoute ? (
        // If the URL is for the modal route, render the modal layout
        <Modal>
          {children}
        </Modal>
      ) : (
        // Otherwise, render the regular layout
        <main>{children}</main>
      )}
    </>
  );
}

// Example Modal Component
const Modal = ({ children }: { children: ReactNode }) => {
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        {children}
      </div>
    </div>
  );
};

    snippets/layout.tsx: Handles the main layout for /snippets and its children.
    @modal/(.)snippets/[id]/page.tsx: Will only activate when the modal route is explicitly used, such as /@modal/(.)snippets/1, avoiding interference with the static /snippets/new page.

    Solution 2: Make Modals Optional (Controlled at Route Level)

    Make sure that the modal route only activates when it is explicitly invoked, when a modal needs to be opened (/@modal/(.)snippets/1). This avoids accidental modal rendering on /snippets/new.

    In your app, you can conditionally show the modal based on the actual route, making sure that /new doesn’t trigger modal logic. You could control this by checking the pathname and rendering the modal only when necessary.

    // snippets/layout.tsx
export default function SnippetsLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const isModalRoute = router.pathname.includes('/@modal'); // Check for modal route

  return (
    <>
      {isModalRoute ? (
        // Render modal when the modal route is active
        <Modal>
          {children}
        </Modal>
      ) : (
        // Otherwise, render the normal page content
        <main>{children}</main>
      )}
    </>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search