React-Hot-Toast setup in Next.js
Toast notifications are those little messages that briefly appear on a website or app to let you know something happened. Whether it’s a success message, an error alert. In this blog, i’ll show you how to add these toast notifications to your Next.js application using the react-hot-toast library.
Why Toast Notifications?
Think of toast notifications as a polite tap on the shoulder, delivering information without causing any disruptions. They’re a user-friendly way to share updates and feedback.
“Toast notifications are a common feature used by many big websites and applications. For instance, Gmail employs toast notifications to confirm the successful sending of emails. Twitter uses these notifications for new tweets, mentions, and direct messages.Many more brands like Facebook, GitHub, Slack, WhatsApp etc use toast notifications for delivering information”
Let’s Setup Our Next.js app for ‘react-hot-toast’
We are going to see, when user clicks on a button, a toast of ‘you did it’ will appear on the screen.
Step 1: Installing react-hot-toast
npm install react-hot-toast
Step 2: Add toaster component above children in layout.js for app router.
Note — added line 17 into the default layout.js file.
Toster position — Toast position determines where on the screen toast notifications should appear. You can choose positions like top-right for a balanced view or bottom-left for less intrusiveness. The choice depends on your design and the level of attention you want to draw to notifications.
Step 3: Displaying Toast Notifications
Note — import toast.js (file where you are using toast, don’t get confused with the name) into our page.js (page.js is in the same folder with layout.js)
Note — You can also customise and use different toast styles, refer official docs for that. https://react-hot-toast.com/docs
Adding toast notifications to your Next.js app is an easy way to communicate with users without interrupting their experience. With react-hot-toast, you can make your website or app more user-friendly and interactive. Happy coding!
Follow me here —
Twitter- https://twitter.com/rahulmoreweb3