umami-script-nextjs
v1.0.0
Published
A simple, lightweight Next.js component for integrating Umami analytics
Maintainers
rico00121Readme
Umami Script for Next.js
A simple, lightweight Next.js component for integrating Umami Analytics into your Next.js application.
Features
- 🚀 Simple Integration - Just add the component to your layout
- 🔒 Privacy-Focused - Uses Umami, a privacy-focused analytics platform
- ⚙️ Configurable - Supports environment variables and props
- 📦 TypeScript - Fully typed with TypeScript
- 🎯 Zero Dependencies - Only uses Next.js built-in Script component
Installation
npm install umami-script-nextjs
# or
yarn add umami-script-nextjs
# or
pnpm add umami-script-nextjsUsage
Basic Usage
- Add your Umami website ID to your environment variables:
NEXT_PUBLIC_UMAMI_WEBSITE_ID=your-website-id-here- Import and add the component to your
app/layout.tsx:
import UmamiScript from 'umami-script-nextjs';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
{children}
<UmamiScript />
</body>
</html>
);
}Advanced Usage
You can also pass props directly to the component:
<UmamiScript
websiteId="your-website-id"
scriptSrc="https://your-umami-instance.com/script.js"
strategy="afterInteractive"
/>Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| websiteId | string | process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID | Your Umami website ID |
| scriptSrc | string | "https://cloud.umami.is/script.js" | Umami script source URL |
| strategy | 'afterInteractive' \| 'lazyOnload' \| 'beforeInteractive' \| 'worker' | "afterInteractive" | Next.js Script loading strategy |
Requirements
- Next.js 13+ (App Router)
- React 18+
License
MIT
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Related
- Umami Analytics - Privacy-focused web analytics