How to Handle Modals in a Large-Scale Next.Js Project
Modals are a common way of displaying content in a non-blocking way on web pages. In large and complex frontend projects, modals can become complex and difficult to manage. In this article, we’ll explore techniques for handling modals in a large Next.js project.

Step 1: Managing a state to open and close modal.
One of the biggest challenges with modals in large projects is managing their state across different components. We’ll consider using a centralized state management such as Context API to manage the modal state across the project. This approach will allow us to easily access the modal state from any component and maintain a single source of truth for the state.
Usually, I create a context hook to manage all the UI state changes across the project. Let’s create a context naming ManagedUI
in our project and in the same file create a wrapper component to provide all the contexts. The component should have a state variable that determines whether the modal is visible or not.
Now, use this wrapper in _app
file to wrap the all the pages. Something like this.
Step 2: Creating the modal container using createPortal
In Next.js, pages are rendered on the server side before being sent to the client. This can create issues with modals, as they need to be added to the DOM after the page has loaded.
To solve this issue, consider using createPortal API to render the modal outside of the normal React component tree. A portal allows you to render a component outside of its parent component, making it easy to add the modal to the DOM without interfering with the normal page rendering.
In the above code, I’m using teleporting this modal container to body node (line 25).
Also, using useRef
component to handle the clicks out modal component which will be the child component of modal container. I’ve used modular CSS to give style to our modal container which goes as follows:
We’re almost done. Now, Let’s see how to use modal container in different use cases.
I have imported the Modal
container into this page and am using it here. To manage the state of the Modal
container, I'm utilizing the useContext
API. When the button is clicked, I'm updating the openModal
state to change the visibility of the Modal
which is containing a box (div) with necessary content.
Conclusion
Modals can be a valuable tool in large frontend projects, but they can also create challenges in managing their state and rendering them on the page. By using a centralized state management tool, creating reusable modal components, and using createPortal for rendering, we can more effectively handle modals in your project.
If you need GitHub repo for the codes, comment down.
In Plain English 🚀
Thank you for being a part of the In Plain English community! Before you go:
- Be sure to clap and follow the writer ️👏️️
- Follow us: X | LinkedIn | YouTube | Discord | Newsletter
- Visit our other platforms: CoFeed | Differ
- More content at PlainEnglish.io