Usage with Next.js
How to use the library with Next.js
💡 This guide shows how to use the library with Next.js /app router (/pages router is also supported). @pheralb/toast+v0.3.0 supports Next.js 15 with React 19.
Create a new Next.js project
- Run the following command:
bash
npx create-next-app@latest- Select the default options:
bash
√ What is your project named? ... nextjs-project√ Would you like to use TypeScript? ... Yes√ Would you like to use ESLint? ... Yes√ Would you like to use Tailwind CSS? ... Yes (👈optional)√ Would you like to use `src/` directory? ... Yes (👈optional)#...Add the library
- Run the following command:
bash
- Add the
Toasterto thelayout.tsxfile:
💡 By default,
Toasterincludesuse clientdirective.
tsx
// 📃 layout.tsximport { Toaster }from "@pheralb/toast";export default function RootLayout({ children,}: Readonly<{ children: React.ReactNode;}>) { return ( <html lang="en"> <body className={inter.className}> {children} <Toaster /> </body> </html> );}- Use the
toastfunction in yourclient components:
tsx
"use client";import { toast }from "@pheralb/toast";export default function MyComponent() { return ( <button onClick={()=> toast.success({ text:"Ready 🚀✨", }) } > Click me! </button> );}Add the styles (optional)
The library exports a CSS file that you can include in your project. Only use in cases where the toast styles do not render correctly:
tsx
// 📄 app/layout.tsximport type { ReactNode }from "react";import "@pheralb/toast/dist/styles.css";export default function RootLayout({ children,}: Readonly<{ children: ReactNode;}>) { return ( <html lang="en"> <body>{children}</body> </html> );}✨ Ready.