Skip to content

nextjs.mdx

Latest commit

 

History

History
105 lines (80 loc) · 2 KB

nextjs.mdx

File metadata and controls

105 lines (80 loc) · 2 KB
Raw
title Usage with Next.js
description How to use the library with Next.js
category Framework guides

💡 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

  1. Run the following command:
npx create-next-app@latest
  1. Select the default options:
√ 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

  1. Run the following command:
  1. Add the Toaster to the layout.tsx file:

💡 By default, Toaster includes use client directive.

// 📃 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>
  );
}
  1. Use the toast function in your client components:
"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:

// 📄 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.