Use mutation trpc with nextJs

import { z } from "zod";

import {
    createTRPCRouter,
    protectedProcedure,
    publicProcedure,
} from "~/server/api/trpc";

export const recipeRouter = createTRPCRouter({
    create: protectedProcedure
        .input(z.object({ title: z.string(), description: z.string() }))
        .mutation(async ({ ctx, input }) => {
            const recipe = await ctx.db.recipe.create({
                data: {
                    title: input.title,
                    description: input.description,
                    userId: ctx.session.user.id,
                },
            });

            return recipe;
        }),
});

import { z } from "zod";

import {
    createTRPCRouter,
    protectedProcedure,
    publicProcedure,
} from "~/server/api/trpc";

export const recipeRouter = createTRPCRouter({
    create: protectedProcedure
        .input(z.object({ title: z.string(), description: z.string() }))
        .mutation(async ({ ctx, input }) => {
            const recipe = await ctx.db.recipe.create({
                data: {
                    title: input.title,
                    description: input.description,
                    userId: ctx.session.user.id,
                },
            });

            return recipe;
        }),
});

"use client";
import { api } from "~/trpc/server";

const NewRecipeButton = () => {
    const createRecipe = 
    return <button>new recipe</button>;
};

export default NewRecipeButton;

"use client";
import { api } from "~/trpc/server";

const NewRecipeButton = () => {
    const createRecipe = 
    return <button>new recipe</button>;
};

export default NewRecipeButton;