JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Follow publication

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.

A screenshot of modal component with blurred background in NextJs project by Deepak Kumar
Screenshot of the actual Modal in NextJS

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:

Published in JavaScript in Plain English

New JavaScript and Web Development content every day. Follow to join our 3.5M+ monthly readers.

Written by Deepak Kumar

Graduate Frontend Engineer at Doorpix | Sometimes Code, Sometimes Write. On a journey to live a better life | https://dazzlerkumar.vercel.app/

Responses (2)

Write a response

how can I manage multiple modals on 1 page? let's say i have profile page and I have multiple edit forms

You kept me hooked from start to finish.