Building CRUD apps with Next.js

Next.js is a widely used and open-source framework in web development. It's a go-to framework in terms of both server-side and client-side rendering. Next.js provides configurations for React applications and adds its own features on top of the structure as well.

Note: Next.js offers vast features and can be learned through building applications here.

Next.js architecture
Next.js architecture

The keyword CRUD

CRUD is a highly popular term amongst developers.

It is an acronym for the following words:

  1. Create

  2. Read

  3. Update

  4. Delete

CRUD applications

The term CRUD is mainly used to define the functionalities of applications. CRUD applications refer to software applications that allow users to manage data by creating, reading, updating, and deleting records, usually through user interfaces.

A great way to start learning Next.js is to be able to build a fully functional CRUD application in it. Without further ado, let's get started!

Setting up a Next.js project

Before we move on to the code, let's learn how to get our project up and running first. The procedure for a Next.js project is quite similar to that of React in terms of both commands and syntax.

First, we're going to open up a directory and initialize our project in the same directory.

npx create-next-app .

Then, the terminal will prompt us with a few settings that we'll say either "Yes" or "No" to according to our project scope and requirements.

The project structure should be similar to the given structure.

We can now run our application using this command:

npm run dev

A full stack notes app

In today's Answer, we will be creating a notes app that allows users to see the listed notes, create new ones, and update or delete already existing ones.

Technologies used

  1. Next.js will be used for the front end.

  2. Express and some middleware libraries will be used for the back-end.

Client and server interaction
Client and server interaction

Next.js front-end

First and foremost, let's set up the front end for our code. 

"use client";

  • We mention "use client at the top of the code to show that this code represents the client code.

 const [notes, setNotes ] = useState([]);
 const [inputValue, setInputValue] = useState("");
 const [editIndex, setEditIndex] = useState(null);

  • We define the states needed for our interface. This includes the notes themselves, the input inputValue of the user for the new note and an editIndex which is used for conditional rendering. This means that if the editIndex holds an index and an editable field opens up for updating the note's content.

const fetchNotes = async () => {
    
    try{
      const response = await fetch("http://localhost:4000/api/notes");
      const data = await response.json();
      setNotes(data);
    }catch(error){
      console.log("Error encountered: ", error);
    }
  }

  • A useEffect hook can make use of the function fetchNotes to retrieve the existing notes from the server side and display them to the user. 

const addNote = async () => {
    if(inputValue !== ""){
      
      try{
        const response = await fetch("http://localhost:4000/api/notes", {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ content: inputValue })
        })
        const data = await response.json();
        setNotes([...notes, data]);
        setInputValue("");
      }catch(error){
        console.log("Error encountered: ", error);
      }
    }
  }

  • To add a note, we use the addNote function that gets triggered once the user presses the button. If the inputValue i.e. the note content is not empty, a new note is added both through the setNotes([...notes, data]) call and on the backend.

const updateNote = async (index, updatedValue) => {
    const noteToUpdate = notes[index];
    try {
      await fetch(`http://localhost:4000/api/notes/${index}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ content: updatedValue })
      });
      noteToUpdate.content = updatedValue;
      setNotes([...notes]);
      
    } catch(error){
      console.log("Error encountered: ", error);
    }
  }

  • Next, we create the function updateNote which takes the index and new content i.e. updatedValue of the note. It updates the server and then uses the index of the note to access it using noteToUpdate = notes[index] and update its content using noteToUpdate.content = updatedValue;.

const deleteNote = async (index) => {
    const yesOrNo = window.confirm("Are you sure you want to delete this note?");
    if(yesOrNo){
      
     try {
       await fetch(`http://localhost:4000/api/notes/${index}`, {
          method: 'DELETE'
       })
        setNotes(notes.filter((_, i) => i !== index));
      } catch(error){ 
          console.log("Error encountered: ", error);
      }
    }
  };

  • Finally, we make the deleteNote function. It simply takes the index and filters out the note to be deleted through the filter method. We also update the server. Prior to the deletion, it takes confirmation from the user.

 const editNote = (index) => {
    const updatedNotes = [...notes];
    updatedNotes[index].editable = true;
    setNotes(updatedNotes);
    setEditIndex(index);
  };
  const saveNote = (index) => {
    const updatedNotes = [...notes];
    updatedNotes[index].editable = false;
    setNotes(updatedNotes);
    setEditIndex(null);
  };

  • The editNote function allows us to set a specific note as editable by changing its editable property to true, while the saveNote function saves the changes and sets its editable property to false. This allows toggling of buttons.

Running the front-end

npm run dev command runs the Next.js code
npm run dev command runs the Next.js code

Express back-end

Having set up our front-end, let's now see where the server fetch requests actually go and how they're implemented.

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(bodyParser.json());
const port = 4000;

  • We import express for setting up our server, bodyParser to help extract the data sent in the request while cors helps enable cross-origin requests (different ports). We make our server listen on the port 4000.

Note: Make sure to replace the port and endpoints when running it on your machine.

const notes = [];
app.get('/api/notes', (req, res) => {
  res.json(notes);
});

  • We keep an initially empty array notes to keep track of the CRUD operations. The endpoint /api/notes is used as a GET request to retrieve the notes at any time.

app.post('/api/notes', (req, res) => {
  const { content } = req.body;
  const newNote = { content, editable: false };
  notes.push(newNote);
  res.json(newNote);
});

  • To create new notes, we use the endpoint /api/notes as a POST request and the content is sent in the body of the request.

app.put('/api/notes/:index', (req, res) => {
  const { index } = req.params;
  const { content } = req.body;
  if (index >= 0 && index < notes.length) {
    notes[index].content = content;
    res.sendStatus(200);
  } else {
    res.sendStatus(404);
  }
});

  • To update a specific note, the index is sent in the URL of the request. We use this index to update our notes array by setting the new content sent in a PUT request's body.

app.delete('/api/notes/:index', (req, res) => {
  const { index } = req.params;
  if (index >= 0 && index < notes.length) {
    notes.splice(index, 1);
    res.sendStatus(200);
  } else {
    res.sendStatus(404);
  }
});

  • We also send the index in the request URL for note deletion and use a DELETE request for this purpose. Using this index we can use splice to remove that note from the notes array accordingly.

Running the server

node apiServer.js runs the apiServer.js file
node apiServer.js runs the apiServer.js file

Complete code

Congratulations! We've set up the whole application in a few steps, and it can now be run and experimented with by simply clicking the "Run" button.

 (F   (n00 (-– ¾F(  $]ºº]$  òÿÿÿÿò  8àÿÿÿÿÿÿÿÿà8âÿÿÿÿÿÿÿÿÿÿâ¡ÿÿÿÿÿÿÿÿÿÿÿÿ¡#ôÿÿOOOÿ®®®ÿ«««ÿ«««ÿ«««ÿ«««ÿ­­­ÿgggÿÿÿô#Yÿÿÿÿíííÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿ555ÿÿÿÿY»ÿÿÿÿkkkÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŽŽŽÿÿÿÿÿ»»ÿÿÿÿ			ÿÍÍÍÿÿÿÿÿÿÿÿÿäääÿÿÿÿÿÿ»YÿÿÿÿÿJJJÿýýýÿÿÿÿÿkkkÿÿÿÿÿÿY#ôÿÿÿÿÿ¶¶¶ÿÕÕÕÿ			ÿÿÿÿÿô#¡ÿÿÿÿÿ111ÿDDDÿÿÿÿÿÿ¡âÿÿÿÿÿÿÿÿÿÿâ8àÿÿÿÿÿÿÿÿà8  òÿÿÿÿò  $]ºº]$( @ ,UèèU,*…Òùÿÿÿÿÿÿù҅*–óÿÿÿÿÿÿÿÿÿÿÿÿó–QáÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿáQrûÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿûrrÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿrOûÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿûOäÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿã—ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ—(õÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿô'†ÿÿÿÿÿÿ888ÿ‹‹‹ÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿˆˆˆÿ‰‰‰ÿ___ÿÿÿÿÿÿÿ†ÔÿÿÿÿÿÿÿîîîÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿSSSÿÿÿÿÿÿÿÔ+úÿÿÿÿÿÿÿhhhÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®®®ÿÿÿÿÿÿÿÿú+TÿÿÿÿÿÿÿÿÿËËËÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿôôôÿ,,,ÿÿÿÿÿÿÿÿÿT‚ÿÿÿÿÿÿÿÿÿGGGÿýýýÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿéÿÿÿÿÿÿÿÿÿÿ­­­ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿäääÿÿÿÿÿÿÿÿÿÿÿééÿÿÿÿÿÿÿÿÿÿ+++ÿóóóÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿjjjÿÿÿÿÿÿÿÿÿÿÿéÿÿÿÿÿÿÿÿÿÿÿ‹‹‹ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÌÌÌÿÿÿÿÿÿÿÿÿÿÿÿ‚TÿÿÿÿÿÿÿÿÿÿÿÿãããÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿIIIÿÿÿÿÿÿÿÿÿÿÿÿT+úÿÿÿÿÿÿÿÿÿÿÿhhhÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¯¯¯ÿÿÿÿÿÿÿÿÿÿÿÿú+ÔÿÿÿÿÿÿÿÿÿÿÿÿËËËÿÿÿÿÿÿÿÿÿôôôÿ,,,ÿÿÿÿÿÿÿÿÿÿÿÿÔ†ÿÿÿÿÿÿÿÿÿÿÿÿGGGÿýýýÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ†'ôÿÿÿÿÿÿÿÿÿÿÿÿ±±±ÿìììÿÿÿÿÿÿÿÿÿÿÿÿÿõ(—ÿÿÿÿÿÿÿÿÿÿÿÿ333ÿ___ÿÿÿÿÿÿÿÿÿÿÿÿÿ—ãÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿäOûÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿûOrÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿrrûÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿûrQáÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿáQ–óÿÿÿÿÿÿÿÿÿÿÿÿó–*…Òùÿÿÿÿÿÿù҅*,UèèU,(0` -	(Lj³ø÷³jK(	V ØøÿÿÿÿÿÿÿÿøØ U%‹áÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿá‹&‹ïÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿï‹QÜÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÜRŠþÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿþŠ­ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ­¸ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¸®ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®ŠÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŠPýÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýOßÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿß‹ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ‹#ñÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿñ#Œÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ‹äÿÿÿÿÿÿÿÿÿ$$$ÿhhhÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿeeeÿPPPÿÿÿÿÿÿÿÿÿÿäUÿÿÿÿÿÿÿÿÿÿÿëëëÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿsssÿÿÿÿÿÿÿÿÿÿÿU¡ÿÿÿÿÿÿÿÿÿÿÿeeeÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÌÌÌÿÿÿÿÿÿÿÿÿÿÿÿ¡	ÚÿÿÿÿÿÿÿÿÿÿÿÿÉÉÉÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿHHHÿÿÿÿÿÿÿÿÿÿÿÿÚ	(ùÿÿÿÿÿÿÿÿÿÿÿÿEEEÿüüüÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®®®ÿÿÿÿÿÿÿÿÿÿÿÿÿø(Kÿÿÿÿÿÿÿÿÿÿÿÿÿÿªªªÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿôôôÿ,,,ÿÿÿÿÿÿÿÿÿÿÿÿÿÿLjÿÿÿÿÿÿÿÿÿÿÿÿÿÿ)))ÿòòòÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŒŒŒÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿj´ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿˆˆˆÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿãããÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ³øÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿáááÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿiiiÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿøøÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿeeeÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿËËËÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿø³ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÉÉÉÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýýýÿHHHÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ´jÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿEEEÿüüüÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®®®ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿjLÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿªªªÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿôôôÿ,,,ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿK(øÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ)))ÿòòòÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŒŒŒÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿù(	ÚÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿˆˆˆÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿãããÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÚ	¡ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿáááÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿiiiÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¡UÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿeeeÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÌÌÌÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿUäÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÉÉÉÿÿÿÿÿÿÿÿÿýýýÿHHHÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿä‹ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿEEEÿüüüÿÿÿÿÿ®®®ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŒ#ñÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¬¬¬ÿûûûÿ,,,ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿñ#‹ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ222ÿ}}}ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ‹ßÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿßOýÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿýPŠÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿŠ®ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ®¸ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ¸­ÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿ­ŠþÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿþŠRÜÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÜQ‹ïÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿï‹&‹áÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿÿá‹%U ØøÿÿÿÿÿÿÿÿøØ V	(Kj³÷ø³jL(	‰PNG


IHDR\r¨fsRGB®Îé8eXIfMM*‡i  D"8sIDATxí]	°ՙn”]<QVA–èÄh$	ÊNŒŽ13*ˆq°Âdªč©I¡ˆ˜D“L2“ª(Î(Ԙ2ÖęÑG	‹Áq_@å±ˆà†Šxțï»Ð¾{o÷½½ÓýýUß{}»OŸå;çÿûôùÏ9Ý‘d®(Dg Ð8	èôNº]€î@ hx¥?v
ÀNà3à=`;ð6ð.ð&°àuâà  ±”6‰P©Ð½€Á@ÿàRÓPùiZqÊ^DNãà€wp¼
Ø¼ÐXÐhИHg@ÀÌ
:Ùâ|ð5` p"@À'¼É²™s{
ëpü*ð2Àލ…Ä dÒ¯Œ–È|(0ø
0à“>Kò
³xX¬6IJȤC|?$KENØ}ϓ|ŠÂòµáàöh $	2 Ù|/§Â.Nz’#¼ÃW€eÀ
à5€ã
’ˆÜ¶ˆúà;Ày•¾ ñgàs©h^IÄÈDL(¢;¸8 ÒHjg€cH|x 1 ËR"Œa€ïôӁ•GÁÙ@…è9`/`%0è
HÄ@jð½~,° ÛK
Ÿ,t).ÎèI‘ˆDèT¦Oû)~º°Vìu$b 誛
ÐU%¥7“ƒ¨›ù_É$b 8Aç×À€ßøJö3` 510wQñ?¤øvrðÑá:ü2þKÄ@ ¤øv*{%#í‚AZ€咁^(õÏ=ñ³g\ãÀWƒÛ€É!:àß,`à6ýÏ643:@’c.Fٟ¤ðùä€u?Ð<'áÝ€ƒ€”_܏vp: É8Q¾›
IñŁ·
p{3ÎóÐkHÈ¢ŒG¡ž¼•®cñѼ
<62&‹
×2uCÁÿàÚò敭ßâ¤Tø3Ú
½ê
€›…;î¼”ªd/~m€½.ø’XÆ@{äw.°ð«d]G•Ú{lKÜàEbœÿý(P©RuMüTÛC›ÒÚÃ
Àdäï])¿Œ_Lmà=Äû=@bœÍ÷K€ÛGUkÙ^œUÓØÆØÖøš)1€È»gÕT¢ÂŠ¯°m`9Ú\Ú®³ÀQþÍ@ØÊÔýⰖ6ð:ڞÕ^›w¬òï¸E—D¤Áç	ü5°àºëÄFÐ,ßÜ
ðX"Òd€mð<€nB~òì@´¸÷µt×tx‹»
ü;ÚfÞ>ñ“ªíI8µˆ»¿8Ó¸C1Ûª$B¸•§e†©Ý+þ’jl«ÜEZÃÇ& ©ÊS:â:Š6°möë´ÿ\G1¥ç`¢¨Å!“nl»lÃƊÉ^€Q`í·@OcÙSÆÄ@e¸Í·º¹ç¤qbªp•ÿãS†Ä@upšº±FÀD@å¿Г¿º†¦Ðæ2@#À¹ÆõL3£A’”$H2Ç_hž¶FH#rq(íÿOàDƒò¤¬ˆ¨àrunGOWaêbŠ&–SgDñ3ÀEDçto§*Ǥšú¡Ä9kŠÝ~)¿•¡,$Âx¿RŸ1˜vàK áÀ9€D䍁U(ðw®&LEÒäê©»€S)¹é3ÐY8x8$.i€(íŒÄK¬ŀYœŽìðaÈ]­—´À4”ôǀ	c‰“®Å@3¸fà€ó•4ÆÆ¢„ÿ
Ð/*bàüþÇþ˜$!I€~‡Ø7ÉB*-1`	o Ÿº	‘$»àÇ¡D‹¾‰”L‰ˆûàòßêJ"’äÀOQ¢Ë)•ö2@#Ðx4‰"$e¨ø·Iö8’àOiˆ8ø"ݼGäÞ8[xÄt<ñ.´´7&‚m&؎R^‹³tq÷ؕá.¾§ÅYÅ-2Ƚd§ûã*_Üà&d|j\™W¼b ãôGùö«â*gœ¯£‘釁ÄF4ã"IñŠ؃´/b1q€NÈðãÀY€Dˆp¼ŒÛ9îãpÑ}w\¯ó‘Ô¤£“Ó1 j`€èOûŸî­xK=€ÑHñ÷÷A“ˆ1
Ÿ#¾
D:U8jÀõýtù©ë$b bžA||ØU¼Q¿ü26%ªÌ)1 Šè…_
Àꢳ!~DÙàºæ•¿à+b >A´Ü:]ÑE$ˆ£50òGDhRÑtèÐÁéÝ»wRÉ)ðPÇ‘èn$‘ 3ÜÖë@bS§Nu–,Yâ´jÕʲœç:»¡ôÜ;ÀáÀßó@£`Ç|ã–-[)“'OVýÙՆ©sFxÚ®“âÛ¥øn}͛7¯ üü³~ýúƺº:»ŒÀQ—©J_¤ÎUKj8–q0xðàÆ;v4̞=[õhW=¾	Ýë	¤&·!e5Ë8hÑ¢EãÝwß]¤üüñá‡6öïß_õiW}þSZÚ?	¿/`Ÿ;vlã¾}ûŽ2<±hÑ"»À§ÐA¸ÜÕX,ã mÛ¶+V¬(©ü<¹wïÞÆ#F¨^íª×;“ÖþaHðcûà”)SÊ*¿{aùòåpÊØc89(Ñ^€žþö4Ž&E¦ÛoÆ
®žWü/· uÆ=±^€žþ*?{k^·_EíÇÅúúz¹íªgö†UI-‹è{WU*
œ:pû9.tÚ·o(/ݺus>ûì3ç‰'ž^Rg€ßäڞGâÌI_D®‘»žåÜ~~½¹­{
øúÙ?N0‘7½SêØ.ƍ׸ÿ~?}/y]nA;êØ£‹³ã2]ñFOB2C?·_I­÷œ”[Ð:°:Ú=#ÀOzKé-㠈ÛÏ£ï%å´®Ý?jÐþIÀ®†PÛ¯¤æ{NÊ-hUÝÿt•:™œƒ˜øõ,â ·ŸG×KÊ-hUÛç¢cƒhP7 ÿÎ¡Â˜Á@µn?¿\Ó-¸k×.¹ýˆ2ã:õú ð`ÙáF„Û=ý-á V·_ÉG¿ç¤Ü‚VéÝõ}¢0WIù­ªøFºýÊ­öóèsM‡rZÕ8pJ¸QÜ*@OK8ëöó³
rZ¥Ôݖa,ßûwËØSéW^y¥Ÿ‡¾.· 5íat7ÔØݏ¤üÖTv#Ý~7n­àA"¸üòËÕ+´£WøèpMÂÅ/ªhK8ˆÒíçgä´F/^„·«ÅŒÀM{eì¨èR›|ú)qØë7Ýt“æ?8'ീKùíP~ºýî¹çž°ú\õýrÚÑ> Ç·UkØeP÷ß|ë^xÇéöó³
‹/V/Àüvòô™¯ôå„ä¢*×pâvûù¹­Ð¾ÊŸ]JûË}óˆk8(•ˆÎÅÇÀĉÑ£GǗ€OÌmÚ´q,X oúð”òe.â˜^ ¡QxÐÓßp’tûùõä4^_ƒN—{à†¾øÅyÄ2†s¤ÛÏÏÐ-عsgµsÛÌÐiêv‘”Z
8
!~PJ?Œc€«ýîºë®À›|Æ]®ܽ{·³zõ긓Rüµ1pnãÔàzïí¥º¼tlpû9³fÍrºvíjT殿þzß4*OÊLã‹~•øÑçžԕ3˜ƒ4Ý~~¯r­;ÔmêxYŒ+üÀ€€¡¤íöó3r­;Ômêx“4à÷Å:7]ՁqLš4)U·Ÿ!rú1”êuê6¿ìÕ$Í
À7›®èÀ8ºwïî̙3Ǹ|5Ï>?î\zé¥ÍOë·œë͆×ðø,ïE›ÅÀŒ3œš•©2¹¹å–[œººº2Wu:E¾‚´›¼^p.H1cJºtû]}õÕB˜uéÔSOu®ºŠ»ÉIc€Ož¥òÄ%ƒ
ÆAZ«ýüüü®kµ ‘ºD?Ç5Þ@Q×À
 ÿé3Àwê+®¸"ýŒT™ÎSÀžUÞ¥à13Àî?ûâ5M'݋úŸ>pûþZµj•~fjÈ
׈×¡Ô‚n©¦±>×ðÿi5D¤[bf íÕ~a‹'·`Xc¹Ÿã-¼1ók¢›½ÿāI«ýüÞ÷ý®kµ QºÅ¯|ókßMËé(92È@’t°ÉíçÇ݂X-èLדa€úN4€“qܞ'$f0@·
@V„nA›Ü˜Yá½L9:â|/^sÇú—	¨Ó)0`êj¿°T\wÝuZ-–Äèî¨\ 	@Ñ:¦±cítûùœ{È-èÇRb×û1%×ôI,Y%T‘ÛÝ~‡‹rú1”ØõÂCŸ€,¼$–´*ˀé«ýÊf<à¹0zþŽ¥èhÕFü„û¦·Ÿ«ý| 8Z-èCRü—¹Tg×ÐHRf€‹glYí–ª¹sçÊ-–Äp÷Ó'+ŽÃèî¶mµ_ؒgÍÍ–îçC¿{ô	òÃ’”ȪÛϏΙ3gÊ-èGR|×¹7`G€Þñ¥¡˜ƒ0U·Ÿ_ÙµZЏ¡Ø¯ŸD )À±ó\>¬»ýʗüйýŠõzN–¤Ä@ÖÝ~~´Ê-èÇP¬×{rs€¿´@¬<—Žœ›|.]ºÔ¸|”Îm|gûõëç¬_¿Þyå•WâKD1—bàM½”¢%¡s\“·Ÿ¥rú1Ëõnì\–ƒ„"-ÉÝ`.4æÛ~%3™àI}[0A²$µ“=-Ò>BH"G®Û^r„­<ÂEBGÝiÚ%”˜’9Ì@^Ý~~
@«ýŠüú1Ü쀆@’tû-[¶ÌèÏ{%@CÙ$ðmAgüøñΚ5kʆхÈøœŠ/双OÿˆlßäÓ¿„áBÐ@.X°À±uäp¥Oüî6œ—x²9MPn¿`ß·o_§¾¾^nÁ`t…
¥§(úª»™ƒ\rûùsÆAÒyóæéۂþT…¡@h
ƒE0lØ0çÎ;ïtڵӘkƸN ¡¡ÁYµjUà
S#ì|^㽺- |¢ÝpÃ
N—.…­ØÞ¥`×^{­zLñ6ƒƒ4ŸÄ›†bç¨öe—]&"ªd€sΜ9UÞ¥àU0ð!
ÀÁ*nPÐ*`—ÿæ›oÖ¨v•¼¹Ái8GåþÔÿhh ØmœŠÍËÀäɓsÏ=×{JÇU0ÀՂóçÏwZ·æþ’ˆø”ƒ€ì›ö8bEzôèá,Y²Dïþ![CŸ>}œ7:k×®
“noÆÀfö>jvR?#b€ƒXˆ(¶üFÃAT¾FÕÕióêˆ[Á{ì°zvÄç>º¡C‡Êía+[0B2Dµœ=€íG~ë(
øĺñÆÕõ‚LO×\sÜ‚>"8|‹`[)
&Lp8ø'‰–ö䌔Óí4oGeÎ#£ÛÀlْ_\“D̀܂‘2ZØl¢Üi´9ŽŒ
täȑ9f Þ¢Ë-¿œ¼‹=€‡YÌyˆn?uQã¯}XͬÍsAïi>=ŒÐ1æ=RÉí+à +
­Ü‚¡¸.2šŠKì«·ßôéÓCƢۃ20hÐ ‡Ë«%53À5@…MA¹%˜¦×Ì£ãÈ킼·j[õä9Î;¸û_(¯ú§¿µ0ÀÕ~rûÕÂ\¸{ômÁPüÜÿ®x#TT9¾™n?¾Êí—N# á•×¥&î}׬¯)
ÝTVL¯!¸ßÔjÁªë`ïp
ß8@RrûUAVŒA嬚Ü=¸ã-Þå€÷pLHª`@n¿*Ȋ1¨Ü‚U“Ëõ?}w
]ìH2@·ß´iÓ†V°¸ [Ë¯%àôÿ‚ëß58±)Э
T`€›|rZbZ-¸.Ö!da+@×ðÎçߞó€Zígf[0p½¼æ†ôžä¤ I´Égr¸$· o%PÇ_rCy
ÀVœ|ß½ ÿ¥à"mòYšÎÊ-è[lÚÄkxAãø“Û¯9]¢[pÒ¤IåȨ¬pP“ÇÏkŠºFeِÌÈígHEødƒnAm"Z–$Žõ5}„›‚zå8üéô2røX›|– ÅàSÜ»w¯³råJƒs™JÖ~T›fþz{ÌÍ«÷xÐj?jµàQ•EÝnòðjsÀùÁ|Gxзý<dXt(·àQ•EÝ.¬p¯47Üð)÷¢þ;…Ïysµ_«V­D‡…È-XTiÔí¢ý?›†~¼è–œÿÛÏî ·`Qý=Vô?šòú^à
€‚¹ºý–.]ª|XÞ
ômÁB~€¿?ŠÆøJõÞD —·äüÜ~Ùhrê‘óÿ©ÛERªÀ…A݀óŠBæìÝ~wÜq‡Ó¾}ûœ•<›Å•[й5ûdóÚ-Õ`˜5?KqÝ~l4’ì0@·à)§œ’/I‚®(¼œà‡Ø‹ü…¥nÎê9¹ý²Y³4èœ!˜Cو2ח*w9ÀÀGKݐõsî&Ÿrûe³¦súé¶? 6Ù8JÊ|(òuwO䴁d°&K)‡nA¾Ê?RšÒn@7,·º8Á=‘õÿrûe½†•nÁM›69k×òM7óÂéý·J•´R€]†e¥nÊê9¹ý²Z³Ååâ /?នo>ŒÒ󕾤”rzrÒÀ óó`åöóV{ö»uëæ4448«V­Êra÷ p³îõQRZ”<{ädK.F9•½#~Tâ¾ûîs.¾øâìN%*Ë
ÀðáÝuë8G&“²¥ì/W:*x%á{Ã}@¦
»‚lõõõNc#çAIòÀÀ±Ç›õiÞ÷£Ë*?ëدÀ0}€g€ãùC"ĀpÛ¯³€Šßû¨4薒ҏ(bÀ8€_QùY” €áîr7'€—ˆ`·ÿî ùj¸6à… *Œ©3ÀWögƒä"¨àl¢
¡Âˆ1:ì±Sg}%È  	¹¥P?÷„þ‹1`›£¯ÉYÐãâŽ"‹‚Dª0b@¤ÆÝö”Ÿ9¬¦Àðý¾[tá‰F1À‡ôp`kÐ\UÓ`œÜRø·A#W81 e`)RÛZMŠÕö÷€[uæ‰F0ð	rq.ÀՁ¥Ú#^ð=C"Ā9P'«R~f½–ï
pn€zdC"Òe ¦§?³\K€÷½¨@&$b }jzú3Ûµöx/{èÄ1 Ra€#ÿ|÷çƟUK­=&Ä^€æTM¹n‘2À9ÿ5)?s¦Àû{O'ó‡DˆDà’ßo[kMÕoK0¿xÿŒÜTd‚_@]b ræ ÆGÃĶÀ´;«€¯ò‡DˆDàêÜ1ÀgaRÛ`ÚÜ'`0ˆÂ  ‰>\ë/ù„ñ½fÐùƒøñ÷„ŽÅ€ˆß!fn÷Z¢|bŸ†ÜðU .t®åटÑÀÚrª9Å+€›ý‘­€±î	ýb rnEŒDk”=æé8àÀÙü!b RžClã€PÞEÙ`¼ÜŒK†'~ß@‰ Ë}*°!`ø@Á¢6Lô
 ;À	$b@DÃÀ?#šÈgÞFý
àµV”ˆ1ŽvýÇ;ÃEsôÝQ¹›ÇÌ=É®ö4¿ ßb@TÅÀn„þ!¹ò3q¼0^ÊV€ãc‰µ1ðܶ´¶[ýïŠëÀM¹=8IˆÝ‰Õ1@Ú…@Cu··`N¸oÀãWJĀÆWúÑåÇe÷±Iœ¯n¦¹Nàmீ¸ÆÜ´ô_d(Ä4`E܅I°¯œ"̵Ë1 *3ð+\þEå Ñ\MâÀÍ)g	rÁ¦
»Œè¿8š>õ¿pô?vIÒ°0€Ç€~ü!b ˆ­øÅ$'Ó%"I¿“¿ŽRýÀi1 Ž0°‡?S~&ÔÓr…ä’Æ€¤{ nô_˜ÄÀÈÌLà?’ÎT€eäÔƎÀ7ùC"rÎÀOQ~"qIË° O8?$b §܋rÿ#@×_â’v¼J̙‚£/¹é3ð'dá/ÈÖ÷W[¤¤›ço'Nü
ðlóú-2ÎÛüå@jÊO~Óî0”À2`HÄ@Æ؄òÐ+–ª¤ÝpOB®ÞuOè¿È(lãS€Ô•Ÿü¦9Èô½ò~ðcß:x/èXd„.ðù°Æ”ò˜dÈÉVày@F$H2ŕŸïü+M*•i€Ül8O@F$H2Á•Ÿå®2­4&r´
POÀ´Ö¢üÔ€ûä7NùYS
ó¶ øÀYƒ1`ðã;ÿJS3n² g['‘@W@"la`32Ên?'ûHB2p
îhām€mu ‰“×j@F@˜ÜV ²­Z!¦¿xIä”ÉÿH®y™Ñ±)üù>ÀåZ!6ºà”aÎ`äþ‚¦ÌdDV$9f€ëù	pM¿6»I¨!LG:\LdrwPyË~ýPá§%Ôæ•L3Æá7çTKÑÄAm€mo|³6©Ÿ	3Ðé-ÒhJ3¿¼?Ž67 á¶yr¶”"€ûþàgÈÎ4.$±1À÷ý_¼[*Š¸&¸¤˜S/õdq´Îìãä‰ÁCÞâhŠ3¿¼>Š6Ŷ%±€¶Èã\€#´RZq¦
ð=lK|ŔXÆÀXäWSˆej5/¡ýÐÓ$±˜:äýv@½‚ †€Î8Ð×
d„1(‡z2~Fà)´ùö3¢ô͋ÁÞÀl€®C¿† ëùâè#´‰›í=².\Lt? %ÑN$9b %Ê:àþƒ2ùä€u	 É1|-˜	ldòÁ÷œœt$b À@?ü¥·@† »FàcÔïρ^€D”d€[9ýࠐzÙà€ŠÏ:
HÄ@ ¾ŒP2v)~ ¦®@•àüïŸz5°Ç|€úÒ¿R«ÖµªàÁ|`# W39؂ºá<î"-±0Àï\<ìdÒå€uÀoGLz1œGp°à—e’倯d‹.øj
HÄ@jôFÊ3€•@ c{s<ÿùJ&	É@‹÷ëöb¸ÙÀw‹ ²§ ©nÁµàvðœ²û< ‰ˆ€ˆˆ,M;œû*p>p!0hHüà{=•ž»ðüxà]IÄÈDLh™èÚâ<'¡Œh8Ç@V Á#ïã˜Jÿ°àfûIŒÈÄHn…¨ûãWŸ}àNÆt[uò$Ÿ¢°›§åþ
@’ 2	’]&)Ž†#€3ˆ“,	=%¯TôÕÀkÀ&à I‰€”ˆ÷I¶®Ó³ðÙ[8	è	´L–]È]tïTðgõÀ6à-@b2U†OVºã:

A?€¯
}.iî|	àxCœÂ÷rvßw;ÎÀ#ê>éi8_b82†WP€ìÑõ聎{'n¯áÓ8ðz;€Æ¤yÝŽsŸœÃ@¥¦¼P¡·o|ÂSùih$3ðÿ@ß¹jìŠáIEND®B`‚

Application demo run

  1. This is what the empty notes application looks like.

Initial application
Initial application

  1. Let's assume a few notes were already set up. To add a new note, we write the input in the box above and simply click "Add Note".

Giving input to the application
Giving input to the application

  1. The note appears at the end of the existing notes.

Adding new notes
Adding new notes

  1. To edit the note, we click on "Edit", which enables the conditional rendering of the "Save" button. After we've changed the input, we can click on "Save" to update the content.

Updating notes
Updating notes

  1. The note has been updated in the list.

Updating notes
Updating notes

  1. Upon clicking delete, we first have to click "Ok" on the alert to delete the note successfully.

You can either cancel the deletion or confirm it.
You can either cancel the deletion or confirm it.

Pros of using Next.js

We can think of Next.js as a game changer when paired with React in a few areas.

  1. Superior search engine optimization

  2. Shorter load times

  3. Support for TypeScript and CSS

  4. More accessible URLs

  5. Prerendering and image optimization

Question

What functionality of CRUD does the filter keyword help in?

Show Answer

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved