I am working on a project that uses contentful and nextjs 14.0.4. We are trying to set up a route interceptor and parallel routes.

What we want to happen is that when someone clicks on a link with /popup/ in the slug, instead of navigating the main page we open a modal and the page is displayed inside.

Currently behaviour is that the main page navigates to the link and then the modal opens on top of that with a placeholder component.

I’ve been looking at the documentation and watching some youtube videos but nothing has stood out to me as the solution and it seems like it might not be possible.

This is our folder structure:

app
[lang] (this can be en or zh)
[[…slug]]
page.tsx
@modal
default.tsx
(.)popup
[…slug] - page.tsx
popup
[…slug]
page.tsx
layout.tsx (contains the children and modal props)

Any help would be appreciated. Thanks.