The add and edit buttons navigate to a page containing a React Hook Form for creating or updating a user record, and the delete button executes a function within the user list component to delete the user record. The example app includes a basic home page and users section with CRUD functionality, the default page in the users section displays a list of all users and includes buttons to add, edit and delete users.

React Hook Form is a relatively new library for working with forms in React using React Hooks, I stumbled across it about six months ago and have been using it in my React and Next.js projects since then, I think it's easier to use than the other options available and requires less code. MySQL, MongoDB, PostgreSQL etc) I'm reading and writing data for users to a JSON flat file located at /data/users.json, the data is accessed and managed via the users repo which supports all basic CRUD operations. To keep the example simple, instead of using a database (e.g. The records in the example app are user records, but the same CRUD pattern and code structure can be used to manage any type of data e.g. This tutorial shows how to build a basic Next.js CRUD application with the React Hook Form library that includes pages that list, add, edit and delete records using Next.js API routes.

Tutorial built with Next.js 10.1.3 and React Hook Form 7.0.5

Next js examples