How to deal with basic Modal in Next.js 13 App dir

The server component page opens the modal via routing. By redirecting adding a search params ?modal=true

1. It checks the search params then conditionally renders the Modal
2. To dismiss the modal, you can go back to previous using <Link/> keeping the server component or useRouter making it a client componentThis approach is stateless and route based:

• stateless — doesn’t use useState
• Route based — checks the searchParams

Next.js 13 introduces exciting new features like the app directory and server components.

You see, server components doesn’t let you use useState innit.

So If you want a pop up a modal ~ ya can’t do it like this 👇 😢

There’s not much in Next13 docs telling us how to deal with this, with all the new app directory and server components! we’re getting left behind! 👴

Tho — We can always add 'use client' at the top but that means we’re changing the server component into a client component and it ain’t cool. We want to be still cool 😎 and keep the fancy stuff e

How about Parallel and Intercept routes?

🤔 Ooohh fancy — but that’s too much if we only want a simple modal that says shows a message and get dismissed ℹ️ .

Modal using search params

I’m actually a Remix guy. I like remix and it actually introduced the nested routes first. In Remix, modals are search params based. We can do that too with Next.js keeping our components still server components.

This approach provides a lightweight and straightforward solution for implementing basic modals without the need for complex routing or state management — Less useStateis cool now 😎

Here’s how to do it:

Page component

This is a Server Component that conditionally renders the Modal.
Instead of a state useState, we trigger the modal via routing.

1. Your Modal visibility 👀 is based on the searchParams .
   If your url contains a ?modal=true then Modal will be visible

2. To dismiss the modal, you just go back from your previous route or remove the search params. You can even keep the search params but change its value to false — ?modal=false

Modal component

Your modal component can be a server component or client component.

Using nextjs <Link /> to dismiss the modal will keep it a server component

If you need more flexibility, you gotta use useRouter and ditch the server component in favor of client component. Only client component can use useRouter — bummer I know right?

Alrighty that’s it! Let’s summarize this:

1. The server component page opens the modal via routing. By redirecting adding a search params ?modal=true
2. It checks the search params then conditionally renders the Modal
3. To dismiss the modal, you can go back to previous using <Link/> keeping the server component or useRouter making it a client component

What do we get?

1. We are now cool
2. We are in trend
3. We doing it differently
4. Stateless and simpler: 💾 Using less to no state is indeed faster. Come on.
5. Shareability: 🌐 Users can bookmark or share the URL, and upon visiting, the modal will automatically open based on the provided query parameter.
6. Performance: 🚀 It ensures fast and efficient modal rendering and avoids unnecessary code complexity because like in #4, it’s Stateless!

Here is a codesandbox using nextjs 13 app dir and with the route based modal — https://codesandbox.io/p/sandbox/next13-basic-modal-rq5hdp?file=%2Fapp%2Fpage.tsx%3A12%2C7

Thanks for the read. I think this is my first article this year. I hope I can keep writing again.