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

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. 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. products, services, articles etc.

Data saved to JSON files

To keep the example simple, instead of using a database (e.g. 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.

React Hook Form Library

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. For more info see https://react-hook-form.com.

Example CRUD App Overview

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. 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 add and edit forms are both implemented with the same add/edit component which behaves differently depending on which mode it is in (“add mode” vs “edit mode”).

The example project is available on GitHub at https://github.com/cornflourblue/next-js-10-crud-example.

#react #next #api #javascript #web-development