Next.js Integration

In-App Notifications for Next.js Apps

Add a notification bell to your Next.js app using the Notilayer script tag and next/script. No npm package to install. Works with App Router and Pages Router. Real-time delivery via SSE.

Get Started Free Learn More

App Router

Add to layout.tsx in 30 seconds

Import next/script and add the Notilayer widget script to your root layout. Set strategy="afterInteractive" so it loads after hydration. That is it. The bell icon and inbox render automatically.

Import next/script

Built into Next.js. No additional package needed.

Add the Script tag

Pass your App ID via the data-app-id attribute. Get it from the Notilayer dashboard.

Bell appears automatically

The widget renders a bell icon with an inbox. Real-time updates via SSE.

app/layout.tsx

layout.tsx

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://api.notilayer.com/widget/widget.js"
          data-app-id="YOUR_APP_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

components/NotilayerInit.tsx

NotilayerInit.tsx

'use client';

import { useEffect } from 'react';

export function NotilayerInit() {
  useEffect(() => {
    // Widget auto-initializes after script loads
    // Use this hook to set the user ID
    if (window.Notilayer) {
      window.Notilayer.identify('user_123');
    }
  }, []);

  return null;
}

User Identification

Identify users with useEffect

The widget loads and initializes automatically. To show user-specific notifications, call window.Notilayer.identify() with the user's ID after authentication. Wrap this in a 'use client' component since it accesses the window object.

Works with Server Components — widget loads via script tag, not React
Call identify() after your auth check resolves
SSE connection opens automatically after identification

Pages Router

Works with _app.tsx too

If your Next.js project uses the Pages Router, add the Notilayer script in pages/_app.tsx. Same component, same strategy. The widget behavior is identical regardless of which router you use.

Same next/script API

The Script component works the same way in both routers. No differences in configuration.

Persists across navigations

Since _app.tsx wraps all pages, the widget stays mounted during client-side route transitions.

No hydration mismatch

The script loads after hydration completes. No SSR/client mismatch warnings.

pages/_app.tsx

_app.tsx

// pages/_app.tsx (Pages Router)
import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({
  Component, pageProps
}: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://api.notilayer.com/widget/widget.js"
        data-app-id="YOUR_APP_ID"
        strategy="afterInteractive"
      />
    </>
  );
}

Compatibility

Built for the Next.js ecosystem

The widget is framework-agnostic by design. Here is why it works seamlessly with Next.js projects of any complexity.

Shadow DOM

Widget styles are fully isolated. Your Tailwind, CSS Modules, or styled-components will not leak into the widget.

SSR Safe

Loads with afterInteractive strategy. No server-side rendering issues, no hydration mismatches, no window errors.

No Bundle Impact

External script loads asynchronously. Zero impact on your Next.js bundle size and build time.

Route Transitions

Widget persists during client-side navigation. Bell state and inbox position are maintained across page changes.

Why Script Tag?

Script tag vs. npm package for notifications

For a notification widget, a script tag is often the better choice. Here is why. Also see our React bell guide.

Aspect	Script Tag	npm Package
Setup steps	1 line	Install, import, configure
Bundle size impact	0 KB	Added to bundle
Version updates	Automatic	Manual npm update
Framework coupling	None	React-specific
SSR compatibility	Built-in	Needs dynamic import

FAQ

Next.js integration questions

How do I add in-app notifications to a Next.js app without an npm package?

Use the next/script component in your layout.tsx (App Router) or _app.tsx (Pages Router) to load the Notilayer widget script. Set the strategy to "afterInteractive" so it loads after the page becomes interactive. No npm install required.

Does the Notilayer widget work with Next.js Server Components?

Yes. The widget is loaded via a script tag, not a React component, so it works alongside Server Components without any issues. The script runs on the client side after hydration. If you need to call window.Notilayer.identify(), wrap that logic in a "use client" component with useEffect.

Will the Notilayer widget styles conflict with my Next.js app styles?

No. The Notilayer widget renders inside a Shadow DOM, which provides full CSS isolation. Your Tailwind classes, CSS modules, or global styles will not affect the widget, and the widget will not affect your app.

Can I use the Notilayer script tag with both the App Router and Pages Router?

Yes. For the App Router, add the Script component in app/layout.tsx. For the Pages Router, add it in pages/_app.tsx. Both approaches use next/script with strategy="afterInteractive". The widget behavior is identical in both cases.

Explore more: Home · React Bell Guide · React Notifications Tutorial

Add Notifications to Your Next.js App

One script tag. No npm package. Real-time delivery. Free plan included.

Get Started Free View Pricing