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 Toaster to the layout.tsx file:

💡 By default, Toaster includes use client directive.

tsx

// 📃 layout.tsx
 
import { 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 toast function in your client 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.tsx
 
import 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.