#Intercepting Routes for sharable modal

1 messages · Page 1 of 1 (latest)

swift skiffBOT
#

Hi @fiery reef. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To add a parallel route for a modal in Next.js, you can use the concept of Intercepting Routes and Parallel Routes. Here's a step-by-step guide on how you can achieve this:

  1. Create a main route: Start by creating a main route that renders your main page. For example, if you have a photo gallery, you might have a route like /photo that renders your main photo page.
// app/photo/page.tsx
import { Photo } from '@/app/ui/photo'
 
export default function Page() {
  return <Photo />
}
  1. Create a slot for the modal: Inside your application, add a slot (for example, @modal) and a default.js file that returns null. This ensures that the modal is not rendered when it's not active.
// app/@modal/default.tsx
export default function Default() {
  return null
}
  1. Intercept the main route: Inside your @modal slot, intercept the main route by creating a folder that matches the main route. Import the <Modal> component and its children into the intercepted route's page.tsx file:
// app/@modal/(.)photo/page.tsx
import { Modal } from '@/app/ui/modal'
import { Photo } from '@/app/ui/photo'
 
export default function Page() {
  return (
    <Modal>
      <Photo />
    </Modal>
  )
}

In the above example, (.)photo is used to intercept the photo segment from within the same level. You can use (..) to match segments one level above, (..)(..) to match segments two levels above, and (...) to match segments from the root app directory.

Please note that the convention used to intercept the route, e.g. (.), depends on your file-system structure. You can refer to the Intercepting Routes convention (https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes#convention) for more details.

#

@fiery reef kapa.ai is still learning and improving, please let us know how it did by reacting below

fiery reef
swift skiffBOT
#

Let me check the knowledge base for you. One moment! :books:

#

If you have a URL like <https://example.com/resize/example/photo1.jpg,> it will depend on how your Next.js application and its routing system are configured.

If you have a page or API route in your Next.js application that matches this URL structure, the corresponding page or API route will be served. For example, if you have a file named photo1.jpg.tsx or photo1.jpg.js inside the pages/resize/example directory in your project, that file will be used to generate the page.

However, if you're using dynamic routes, you might have a file like [photo].jpg.tsx or [photo].jpg.js inside the pages/resize/example directory. In this case, photo1.jpg would be passed as a query parameter to your page or API route.

If you're using the next/image component to handle images in your Next.js application, and you're using a loader like the Gumlet or Thumbor loaders, the URL might be passed to one of these loaders to generate a new URL for the image. The new URL would include parameters for things like the image format, width, and quality.

Here are examples of how the Gumlet and Thumbor loaders might handle this URL:

Gumlet Loader

export default function gumletLoader({ src, width, quality }) {
  const url = new URL(`<https://example.com${src}`>)
  url.searchParams.set('format', 'auto')
  url.searchParams.set('w', width.toString())
  url.searchParams.set('q', (quality || 75).toString())
  return url.href
}

Thumbor Loader

export default function thumborLoader({ src, width, quality }) {
  const params = [`${width}x0`, `filters:quality(${quality || 75})`]
  return `<https://example.com${params.join('/'>)}${src}`
}

In these examples, src would be /resize/example/photo1.jpg, and width and quality would be whatever values you're passing to the loader.

#

Please note that these are just examples, and the actual behavior will depend on your specific Next.js configuration and code.

Sources:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: