Recoil State Management in Nextjs

Welcome 👋 guys, to this new tutorial blog post. In this blog post, I will teach you how to do state management in the nextjs with the help of recoil.

Atoms

In this tutorial, I will teach you how to use atoms from recoil in nextjs.

Think of atom-like a news report, whose work is to take news from one area to the whole nation.

🫠Situation

Let’s suppose, today you have to build a modal for your website. An example of a modal is shown 👇

But how will you make it?

We can use useState hooks for that, but useState will not be efficient for this purpose. So, you need to use Recoil in this situation.

Step1: Download Recoil

yarn add recoil

Step2: Go to the _app.js file and wrap components with RecoilRoot:

Step3: Make a atoms folder in the root directory. Then make a atoms.ts file in that folder.

Step4: Make atom for modalSwitch:

Step5: Use this atom in modal.tsx for making modal functional.

Step6: Use this atom in index.tsx for making modal functional.

Now you can try it

If any error comes, feel free to join the discord server:
https://discord.gg/hN4Wc5VR4M

Thanks for reading this blog post.

Comments

[Gheorghe Avram]

This apparently doesn't work you have Client-Side only component that relies on Recoil.