@airoom/nextmin-react

@airoom/nextmin-react

Plug‑and‑play React Admin Panel that connects to a @airoom/nextmin-node backend. Render an authenticated dashboard with lists, forms, file uploads, settings, and live updates — generated from your JSON schemas.

• “From JSON schema to REST API + Admin”
• 1 month → 1 hour
• Works out of the box with Next.js (App Router and Pages Router)

Documentation

Read the full documentation at: https://nextmin.gscodes.dev/

Features

• <NextMinProvider>: initializes store, loads schemas, and automatically manages live socket connections
• <AdminApp>: full admin shell with auth, sidebar, dashboard, list/create/edit, profile, settings
• Realtime Hooks: Use useRealtime() to consume live backend emissions in any custom component
• Rich Editor Support: Native Tiptap integration via "rich": true in schemas
• Meta Tags & SEO: Built-in support for metadata fields within auto-generated forms
• Components: Sidebar, SchemaForm, FileUploader, reference selectors, phone/password inputs, table & filters
• Hooks/utils: Google address autocomplete, list data helpers, formatters
• Styling included; no extra CSS import needed

Installation

# npm
npm install @airoom/nextmin-react

# yarn
yarn add @airoom/nextmin-react

# pnpm
pnpm add @airoom/nextmin-react

Configure environment

Create or update your frontend env file (e.g., .env.local) with the server base URL and client API key:

NEXT_PUBLIC_NEXTMIN_API_URL=http://localhost:8081/rest
# IMPORTANT: Use the API key stored in your database → Settings.apiKey
NEXT_PUBLIC_NEXTMIN_API_KEY=your_api_key_here

Notes

• NEXT_PUBLIC_NEXTMIN_API_URL should point to your nextmin-node REST base (e.g., http://host:port/rest)
• NEXT_PUBLIC_NEXTMIN_API_KEY must match the value in your backend DB Settings document’s apiKey field

Where to find the API key

• Start your nextmin-node server once
• Open the database and locate the Settings collection/table
• Copy the first Settings document’s apiKey value and paste it here

Next.js setup (App Router)

Wrap only the admin area with the provider and render the AdminApp. Mark these files as client components.

// app/admin/layout.tsx
'use client'
import { NextMinProvider } from '@airoom/nextmin-react';

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return (
    <NextMinProvider 
      apiUrl={process.env.NEXT_PUBLIC_NEXTMIN_API_URL} 
      apiKey={process.env.NEXT_PUBLIC_NEXTMIN_API_KEY}
    >
      {children}
    </NextMinProvider>
  );
}

Realtime Hook Example

import { useRealtime } from '@airoom/nextmin-react';

export function MyLiveComponent() {
    const { isConnected, lastEvent } = useRealtime();

    return (
        <div>
            Status: {isConnected ? 'Online' : 'Offline'}
            {lastEvent && <p>Latest Activity: {lastEvent.event}</p>}
        </div>
    );
}

// app/admin/page.tsx
'use client'
import { AdminApp } from '@airoom/nextmin-react';
export default function AdminIndex() {
  return <AdminApp />;
}

// app/admin/[...slug]/page.tsx
'use client'
import { AdminApp } from '@airoom/nextmin-react';
export default function AdminCatchAll() {
  return <AdminApp />;
}

Behavior

• Unauthenticated users are redirected to /admin/auth/sign-in
• Authenticated users visiting /admin/auth/* are redirected to /admin/dashboard
• Sidebar and pages are rendered according to the schemas loaded from your backend

Pages Router (alternative)

// pages/admin.tsx
import dynamic from 'next/dynamic';
const Admin = dynamic(() => import('@airoom/nextmin-react').then(m => m.AdminApp), { ssr: false });
export default Admin;

Wrap with <NextMinProvider> at a top level where appropriate (e.g., _app.tsx) and ensure it runs on the client.

Default admin credentials (after setup)

After completing the backend setup, sign in with the default super user and change the password immediately:

• Email: [e-mail]
• Username: superadmin
• Password: supersecurepassword

Usage notes

• No extra CSS import required; the package bundles its styles
• Backend auth/paths are configured via env vars (see above)
• Add custom links to routes like /admin/<model>/create or /admin/<model>/<id>
• The first Settings document (model name "Settings") controls site name, logo, and Google Maps key for address autocomplete

TypeScript

Types are bundled with the package.

import type { ApiItemResponse } from '@airoom/nextmin-react/types';

Troubleshooting

• 401 Unauthorized: ensure NEXT_PUBLIC_NEXTMIN_API_KEY matches your DB Settings.apiKey
• Cannot load schemas: verify NEXT_PUBLIC_NEXTMIN_API_URL points to /rest and the backend is reachable
• Address autocomplete: set NEXT_PUBLIC_GOOGLE_MAPS_KEY in your environment and in the Settings document if applicable
• Blank page on Next.js: ensure admin files are client components ('use client') and dynamic imports have ssr: false where necessary

License

Licensed under the Nextmin Proprietary License. © 2025 GSCodes. For commercial licensing or extended rights, contact: [e-mail].