Education level - First CRUD

[felipe-muner]

Hello amazing people, I have been learning a lot about this great next.js and I'm really into to start to use and I'm doing my first CRUD.

I have a .json file and it's where I store my people, I'm using Material-UI and I have on column where an action delete should delete the object from my .json file by ID, I already set up everything, I mean:

I know how to pass the method (POST/DELETE/PUT/GET) to my /api/people (pages/api/people)
I know how to send my data

I could do as below example, it's works (I'm not sure if I can do this, show me if there is some better way)...

My problem is: I don't know how to call the api folder when the user click.. I'm getting an error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I guess this error is because I'm trying to call useSwr function outside

I want to know what is the best way to call the api folder passing method and data. I just did my last attempt without useSwr hook and it works.

But I still with doubt, because in the https://nextjs.org/docs/basic-features/data-fetching#swr documentation, is telling: highly recommended.

Thank you so much in advanced.