Project Setup

Installer et initialiser ZapAction dans un projet Next.js App Router.

​

Project Setup

​

Prerequis

• Un projet Next.js App Router.
• Node.js 20+.
• pnpm, npm, ou yarn.

​

Installer les packages

terminal

pnpm add @zapaction/core @zapaction/react @zapaction/query @tanstack/react-query zod

​

Configurer le contexte serveur

app/bootstrap.server.ts

import { setActionContext } from "@zapaction/core";

setActionContext(async () => {
  return { userId: "demo-user", roles: ["user"] };
});

​

Definir une server action

app/actions.ts

"use server";

import { defineAction } from "@zapaction/core";
import { z } from "zod";

export const createTodo = defineAction({
  name: "createTodo",
  input: z.object({ title: z.string().min(1) }),
  output: z.object({
    id: z.string(),
    title: z.string(),
    done: z.boolean()
  }),
  tags: ["todos"],
  handler: async ({ input, ctx }) => ({
    id: crypto.randomUUID(),
    title: `[${ctx.userId}] ${input.title}`,
    done: false
  })
});

​

Configurer Query client et registre de tags

app/providers.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { setTagRegistry } from "@zapaction/query";
import { useState } from "react";

setTagRegistry({
  todos: [["todos"]]
});

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => new QueryClient());
  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}

​

Verification rapide

terminal

pnpm test
pnpm --filter @zapaction/example-next-app dev