#"use server" functions are not allowed in client components

6 messages · Page 1 of 1 (latest)

serene violet
#

Hello, I'm using Next.js v13.3.5-canary.8, I'm testing what's new by creating a simple TODO application. I am at the stage where it is necessary to remove the tasks. So I'm using a server side function in my TaskItem component. But I have this error.

import { Task } from '@prisma/client'

import { db } from '@/lib/db'

import { Icons } from './icons'
import { Button } from './ui/button'
import { Card } from './ui/card'

async function deleteTask(taskId: number) {
  'use server'
  await db.task.delete({
    where: {
      id: taskId
    }
  })
}

interface TaskItemProps {
  task: Task
}

export default function TaskItem({ task }: TaskItemProps) {
  return (
    <Card className='flex items-center justify-between px-2 py-1'>
      <span>{task.title}</span>

      <Button
        onClick={() => deleteTask(task.id)}
        variant='ghost'
        size='sm'
        className='h-6 w-6 p-1 text-red-500 hover:text-red-600'
      >
        <Icons.trash />
        <span className='sr-only'>Delete</span>
      </Button>
    </Card>
  )
}
image.png
whole gull
#

as the error says you can't have server actions in client components

#

afaik they only work as form actions atm

serene violet
#

I thought Server Actions were useful for using them in client-side components.

whole gull
#

nope

#

they haven't been announced yet so who knows how it works