Next.js Integration Guide

emre-toast works well with Next.js when you keep one global toaster and trigger toasts from client boundaries. This guide gives you a clean baseline for App Router projects.

1) Install

npm install @emrelutfi/emre-toast
# or:
pnpm add @emrelutfi/emre-toast

2) Mount One Global Toaster

Add EmreToaster in app/layout.tsx once:

import { EmreToaster } from "@emrelutfi/emre-toast";
import "@emrelutfi/emre-toast/styles.css";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <EmreToaster position="bottom-right" />
      </body>
    </html>
  );
}

3) Trigger Toasts From Client Components

"use client";

import { emreToast } from "@emrelutfi/emre-toast";

export function MyButton() {
  return (
    <button onClick={() => emreToast.success("Saved!")}>
      Save
    </button>
  );
}

4) Server Action Pattern

Server Actions cannot directly render browser toasts. Return action result to a client component and trigger emreToast.* based on that result.

5) Recommended Starter Config

For product-grade feedback, start with:

• position="bottom-right"
• closeButton
• expand={false} for compact stacks
• movable only if your UI benefits from drag repositioning

<EmreToaster
  position="bottom-right"
  closeButton
  expand={false}
/>

Why This Setup Works

You get a single source of truth for notifications, stable behavior across routes, and a clean path for streaming/progress updates without UI noise.