🛠 prod-alert-cli

Generates a fully working wrapper for prod-alert-react inside your Next.js project in seconds.

Use this when you want to integrate the StatusBadge into a Server Component without manually managing client behavior.

🚀 Quick Start

npx prod-alert

This will prompt:

• Your appId
• Polling interval (ms)
• Whether to show a label

And generate:

src/components/HealthStatusBadge.tsx

You can now import it in any Server/Client Component like:

import HealthStatusBadge from '@/components/HealthStatusBadge';

export default function Page() {
  return <HealthStatusBadge />;
}

📁 Output Example

You would set the parameters during the promt but you can always update them by locating the component below.

// src/components/HealthStatusBadge.tsx
'use client';

import dynamic from 'next/dynamic';

const StatusBadge = dynamic(() =>
  import('prod-alert-react').then(mod => mod.StatusBadge),
  { ssr: false }
);

export default function HealthStatusBadge() {
  return <StatusBadge appId="demo-app" pollingInterval={60000} label={true} />;
}

🧠 Why Use This

• Next.js App Router does not allow useState, useEffect inside Server Components
• This wrapper solves it for you
• Keeps your logic and component tree clean

🧪 Requirements

• React 17/18/19
• Next.js 13+ with App Router
• Works with TypeScript projects (.tsx output)

🛠 Development and Local

If you want to contribute, you can submit a PR. You can test your changes locally as shown below.

git clone https://github.com/yourusername/prod-alert-cli
cd prod-alert-cli
npm install
npm link
prod-alert

📄 License

MIT