The ultimate type-safe bridge between Next.js Server Actions and Client Components. Standardize your data flow, handle validations with Zod, and manage loading/error states effortlessly.
useTransition under the hood for a smooth UX.
bash
pnpm add @alyvro/nexus zod
Create a file (e.g., actions.ts) and use createNexusAction.
typescript
// actions.ts
'use server'
import { createNexusAction } from '@alyvro/nexus/server'
import { z } from 'zod'
const Schema = z.object({
email: z.string().email('Invalid email address'),
})
export const subscribeUser = createNexusAction(Schema, async (data) => {
// Simulate DB delay
await new Promise((res) => setTimeout(res, 1000))
return { id: '123', message: `Subscribed: ${data.email}` }
})
Use the useNexus hook to trigger the action and track its state.
typescript
// FormComponent.tsx
"use client";
import { useNexus } from "@alyvro/nexus/client";
import { subscribeUser } from "./actions";
export default function SubscribeForm() {
const { execute, data, isLoading, error, validationErrors } = useNexus(subscribeUser);
return (
<div>
<button onClick={() => execute({ email: "[email protected]" })} disabled={isLoading}>
{isLoading ? "Loading..." : "Subscribe"}
</button>
{data && <p className="text-green-500">{data.message}</p>}
{error && <p className="text-red-500">{error}</p>}
{validationErrors?.email && <p className="text-orange-500">{validationErrors.email[0]}</p>}
</div>
);
}
createNexusAction(schema, handler)
useNexus(action, options?)
Returns:
MIT © Alyvro