Next.js > How to Implement Dynamic Route Based Modals

Question

Is it possible to implement a dynamic route based modal in Next.js 13 (using the app directory)?

For reference, I'm aiming to create a similar flow to how the homepage of nomadlist (and instagram) is, such that when you click on a card, a modal appears with the updated route, ie https://nomadlist.com/madeira , and when visiting the link link directly, you are taken to the full page.

I am also adding the list items that have modal's to my app's root directory, and I would like to have the modal route URL nested like: /users/[userId]

What I need to do is this:

When triggering the modal in my app's list view, update the current URL without refreshing the browser. (ie using a State / context to trigger the modal). ie /users/[userId]
When visiting the modal's route directly, ie /users/123-43249 , to display a full page of the user.

I've tried a bunch of different things, but can't seem to get this to work, so I'm more curious if this is even possible before spending more time on it.

The current structure of my app is this:

// layout.tsx
export default async function RootLayout({ children }) {
  return(
    <html>
      <head />
      <body>
        <ProfileModalProvider>
          {children}
        </ProfileModalProvider>
      </body>
    </html>
  )
}

// page.tsx
export default async function Home() {
  const users = await getUsers();

  return (
    <main>
      <Hero />
      <SearchSection />
      <UserList users={users} />
      <ProfileModal /> // Should I import the whole page from '/users/[userId] here?
    </main>
  );
}

// ViewUserModalButton.tsx (comes from the UserList.tsx)
export default function ViewProfileButton({ user }: { user: IUser }) {

  return (
    <Link
      as={`/users/${user.id}`}
      href={{
        pathname: "/users/[userId]",
        query: { userId: user.id },
      }}
      scroll={false}
      shallow={true}
    >
      <div>
        View User
      </div>
    </Link>
  );
}

Thank you so much.

Answer 1

The only way I was able to implement this was to override the default behavior of the open modal function and append URL to the window's history.

const [{ shouldShowModal }, setShouldShowModal] = useProfileModal();

const toggleModal = e => {
  e.preventDefault();
  setShouldShowModal({ shouldShowModal: true, profile });
  window.history.pushState({}, "", `/users/${profile.id}`);
}


export default function ViewProfileButton({ user }: { user: IUser }) {
  return (
    <Link
      as={`/users/${user.id}`}
      href={{
        pathname: "/users/[userId]",
        query: { userId: user.id },
      }}
      scroll={false}
      shallow={true}
      onClick={toggleModal}
    >
      <div>
        View User
      </div>
    </Link>
  );
}

Next.js > How to Implement Dynamic Route Based Modals

Question

What I need to do is this:

1 answers

solution1
0 2022-12-06 07:31:09

Next.js > How to Implement Dynamic Route Based Modals

Question

What I need to do is this:

1 answers

solution1 0 2022-12-06 07:31:09

solution1
0 2022-12-06 07:31:09