Build a Simple Next.js Interactive Note-Taking App

Written by

FixTechToday

in

In the ever-evolving digital landscape, note-taking remains a fundamental task. From jotting down fleeting ideas to organizing comprehensive research, the ability to quickly and efficiently capture and manage information is crucial. While numerous note-taking applications exist, building your own offers a unique opportunity to understand the underlying principles of web development and tailor a tool specifically to your needs. This article will guide you through creating a simple, interactive note-taking app using Next.js, a powerful React framework known for its performance and developer-friendly features. We’ll explore the core concepts, provide step-by-step instructions, and address common pitfalls, empowering you to build a functional and personalized note-taking solution.

Why Build a Note-Taking App with Next.js?

Choosing Next.js for this project offers several advantages:

  • Server-Side Rendering (SSR) & Static Site Generation (SSG): Next.js allows you to render your application on the server or generate static HTML at build time, leading to improved SEO and faster initial page loads.
  • Built-in Routing: Next.js simplifies navigation with its file-system-based routing, making it easy to create different pages for your app.
  • API Routes: Easily create backend APIs to handle data storage and retrieval.
  • Developer Experience: Features like hot module replacement (HMR) and automatic code splitting enhance the development workflow.
  • React Ecosystem: Leverage the vast React ecosystem, including UI libraries, state management solutions, and more.

Building a note-taking app with Next.js will not only provide you with a practical tool but also give you hands-on experience with these essential web development concepts.

Project Overview: What We’ll Build

Our note-taking app will have the following core features:

  • Note Creation: Users can create new notes with a title and content.
  • Note Listing: A list of all created notes will be displayed.
  • Note Editing: Users can edit the content of existing notes.
  • Note Deletion: Users can delete notes.
  • Local Storage: Notes will be saved in the browser’s local storage, ensuring data persistence even after the browser is closed.

This project is designed to be a manageable size for beginners, while still providing a solid foundation for more complex features you might want to add later.

Step-by-Step Guide: Building Your Note-Taking App

1. Setting Up Your Next.js Project

First, you’ll need to set up a new Next.js project. Open your terminal and run the following command:

npx create-next-app my-note-app

Replace `my-note-app` with your desired project name. This command will create a new directory with the necessary files to get started. Navigate into your project directory:

cd my-note-app

Now, start the development server:

npm run dev

This will start the development server, usually on `http://localhost:3000`. Open this address in your browser to see the default Next.js welcome page.

2. Creating the Note Model

Before we build the UI, let’s define how we’ll store our notes. We’ll create a simple JavaScript object to represent a note. Create a new file called `Note.js` in a `components` directory (create this directory if it doesn’t exist) and add the following code:

// components/Note.js

export class Note {
  constructor(id, title, content, createdAt) {
    this.id = id;
    this.title = title;
    this.content = content;
    this.createdAt = createdAt;
  }
}

This `Note` class will serve as a blueprint for our notes. Each note will have an `id`, `title`, `content`, and a `createdAt` timestamp. We’ll use the `id` to uniquely identify each note and the `createdAt` for sorting and display purposes.

3. Building the Note Form Component

Next, we’ll create a form where users can create new notes. Create a new file called `NoteForm.js` in the `components` directory and add the following code:


// components/NoteForm.js
import React, { useState } from 'react';

const NoteForm = ({ onAddNote }) => {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (title.trim() === '' || content.trim() === '') {
      alert('Please enter a title and content.');
      return;
    }
    const newNote = {
      id: Date.now(), // Generate a unique ID
      title,
      content,
      createdAt: new Date().toISOString(),
    };
    onAddNote(newNote);
    setTitle('');
    setContent('');
  };

  return (
    <form onSubmit={handleSubmit} className="mb-4">
      <div className="mb-3">
        <label htmlFor="title" className="block text-gray-700 text-sm font-bold mb-2">Title:</label>
        <input
          type="text"
          id="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          required
        />
      </div>
      <div className="mb-3">
        <label htmlFor="content" className="block text-gray-700 text-sm font-bold mb-2">Content:</label>
        <textarea
          id="content"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          rows="4"
          className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
          required
        ></textarea>
      </div>
      <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
        Add Note
      </button>
    </form>
  );
};

export default NoteForm;

This component uses the `useState` hook to manage the form’s input fields. When the form is submitted, the `handleSubmit` function is called, which creates a new note object and calls the `onAddNote` function (passed as a prop) to add the note to the list. This component also includes basic validation to ensure that the title and content fields are not empty.

4. Building the Note List Component

Now, let’s create a component to display the list of notes. Create a new file called `NoteList.js` in the `components` directory and add the following code:


// components/NoteList.js
import React from 'react';

const NoteList = ({ notes, onDeleteNote, onEditNote }) => {
  return (
    <div>
      <h2 className="text-2xl font-bold mb-4">Notes</h2>
      <ul>
        {notes.map((note) => (
          <li key={note.id} className="border rounded p-3 mb-2">
            <h3 className="font-bold text-lg mb-1">{note.title}</h3>
            <p className="text-gray-700 mb-2">{note.content}</p>
            <p className="text-sm text-gray-500">Created at: {new Date(note.createdAt).toLocaleString()}</p>
            <div className="mt-2">
              <button
                onClick={() => onEditNote(note.id)}
                className="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-1 px-2 rounded mr-2"
              >
                Edit
              </button>
              <button
                onClick={() => onDeleteNote(note.id)}
                className="bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded"
              >
                Delete
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default NoteList;

This component receives an array of `notes` as a prop and renders each note in a list. It also includes buttons for editing and deleting notes, calling the `onEditNote` and `onDeleteNote` functions (passed as props) when clicked.

5. Implementing Local Storage

To persist our notes, we’ll use the browser’s local storage. This allows us to save and retrieve data even after the browser is closed. Modify the `pages/index.js` file to include the following logic:


// pages/index.js
import React, { useState, useEffect } from 'react';
import NoteForm from '../components/NoteForm';
import NoteList from '../components/NoteList';

const Home = () => {
  const [notes, setNotes] = useState([]);
  const [editingNoteId, setEditingNoteId] = useState(null);
  const [editedTitle, setEditedTitle] = useState('');
  const [editedContent, setEditedContent] = useState('');

  useEffect(() => {
    // Load notes from local storage on component mount
    const storedNotes = localStorage.getItem('notes');
    if (storedNotes) {
      setNotes(JSON.parse(storedNotes));
    }
  }, []);

  useEffect(() => {
    // Save notes to local storage whenever notes change
    localStorage.setItem('notes', JSON.stringify(notes));
  }, [notes]);

  const handleAddNote = (newNote) => {
    setNotes([...notes, newNote]);
  };

  const handleDeleteNote = (id) => {
    setNotes(notes.filter((note) => note.id !== id));
  };

  const handleEditNote = (id) => {
    const noteToEdit = notes.find((note) => note.id === id);
    if (noteToEdit) {
      setEditingNoteId(id);
      setEditedTitle(noteToEdit.title);
      setEditedContent(noteToEdit.content);
    }
  };

  const handleUpdateNote = (id) => {
    setNotes(
      notes.map((note) =>
        note.id === id ? { ...note, title: editedTitle, content: editedContent } : note
      )
    );
    setEditingNoteId(null);
    setEditedTitle('');
    setEditedContent('');
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">My Notes</h1>
      <NoteForm onAddNote={handleAddNote} />
      {editingNoteId ? (
        <div className="mb-4">
          <h3 className="text-lg font-bold mb-2">Edit Note</h3>
          <input
            type="text"
            value={editedTitle}
            onChange={(e) => setEditedTitle(e.target.value)}
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
          />
          <textarea
            value={editedContent}
            onChange={(e) => setEditedContent(e.target.value)}
            rows="4"
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
          ></textarea>
          <button
            onClick={() => handleUpdateNote(editingNoteId)}
            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2"
          >
            Update Note
          </button>
          <button
            onClick={() => setEditingNoteId(null)}
            className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          >
            Cancel
          </button>
        </div>
      ) : (
        <NoteList notes={notes} onDeleteNote={handleDeleteNote} onEditNote={handleEditNote} />
      )}
    </div>
  );
};

export default Home;

Let’s break down the changes:

  • Import Statements: We import `useState` and `useEffect` from `react` and the `NoteForm` and `NoteList` components.
  • State Variables:
    • `notes`: An array to store our notes.
    • `editingNoteId`: Holds the ID of the note being edited, or null if no note is being edited.
    • `editedTitle`: Holds the title of the note being edited.
    • `editedContent`: Holds the content of the note being edited.
  • `useEffect` Hook (Load Notes): This `useEffect` hook runs when the component mounts (and on subsequent re-renders if the dependency array changes). It attempts to load notes from local storage using `localStorage.getItem(‘notes’)`. If notes are found in local storage, they are parsed from JSON and set as the initial state of the `notes` array using `setNotes()`. The empty dependency array `[]` ensures this effect runs only once, on initial render.
  • `useEffect` Hook (Save Notes): This `useEffect` hook runs whenever the `notes` state variable changes. It uses `localStorage.setItem(‘notes’, JSON.stringify(notes))` to save the current `notes` array to local storage as a JSON string. The dependency array `[notes]` ensures this effect runs whenever the `notes` state changes.
  • `handleAddNote` Function: This function is passed to the `NoteForm` component. It receives a new note object as an argument and updates the `notes` state by adding the new note to the existing array using the spread operator (`…notes`).
  • `handleDeleteNote` Function: This function is passed to the `NoteList` component. It receives the ID of the note to delete and updates the `notes` state by filtering out the note with the matching ID using the `filter()` method.
  • `handleEditNote` Function: This function is passed to the `NoteList` component. It receives the ID of the note to edit, finds the note, and sets the `editingNoteId`, `editedTitle`, and `editedContent` state variables.
  • `handleUpdateNote` Function: This function is called when the user submits the edit form. It updates the specific note in the `notes` array with the new title and content, and resets the editing state.
  • JSX Structure:
    • The main `div` acts as a container.
    • The `NoteForm` component is rendered, passing the `handleAddNote` function as a prop.
    • Conditionally renders the edit form or the `NoteList` component based on whether `editingNoteId` is null or not.

6. Integrating the Components in `pages/index.js`

Now, let’s put everything together in `pages/index.js`. Replace the content of this file with the following code. This file will be the main page of our application.


// pages/index.js
import React, { useState, useEffect } from 'react';
import NoteForm from '../components/NoteForm';
import NoteList from '../components/NoteList';

const Home = () => {
  const [notes, setNotes] = useState([]);
  const [editingNoteId, setEditingNoteId] = useState(null);
  const [editedTitle, setEditedTitle] = useState('');
  const [editedContent, setEditedContent] = useState('');

  useEffect(() => {
    // Load notes from local storage on component mount
    const storedNotes = localStorage.getItem('notes');
    if (storedNotes) {
      setNotes(JSON.parse(storedNotes));
    }
  }, []);

  useEffect(() => {
    // Save notes to local storage whenever notes change
    localStorage.setItem('notes', JSON.stringify(notes));
  }, [notes]);

  const handleAddNote = (newNote) => {
    setNotes([...notes, newNote]);
  };

  const handleDeleteNote = (id) => {
    setNotes(notes.filter((note) => note.id !== id));
  };

  const handleEditNote = (id) => {
    const noteToEdit = notes.find((note) => note.id === id);
    if (noteToEdit) {
      setEditingNoteId(id);
      setEditedTitle(noteToEdit.title);
      setEditedContent(noteToEdit.content);
    }
  };

  const handleUpdateNote = (id) => {
    setNotes(
      notes.map((note) =>
        note.id === id ? { ...note, title: editedTitle, content: editedContent } : note
      )
    );
    setEditingNoteId(null);
    setEditedTitle('');
    setEditedContent('');
  };

  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">My Notes</h1>
      <NoteForm onAddNote={handleAddNote} />
      {editingNoteId ? (
        <div className="mb-4">
          <h3 className="text-lg font-bold mb-2">Edit Note</h3>
          <input
            type="text"
            value={editedTitle}
            onChange={(e) => setEditedTitle(e.target.value)}
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
          />
          <textarea
            value={editedContent}
            onChange={(e) => setEditedContent(e.target.value)}
            rows="4"
            className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
          ></textarea>
          <button
            onClick={() => handleUpdateNote(editingNoteId)}
            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mr-2"
          >
            Update Note
          </button>
          <button
            onClick={() => setEditingNoteId(null)}
            className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
          >
            Cancel
          </button>
        </div>
      ) : (
        <NoteList notes={notes} onDeleteNote={handleDeleteNote} onEditNote={handleEditNote} />
      )}
    </div>
  );
};

export default Home;

This code imports the `NoteForm` and `NoteList` components and passes the necessary props to them. It also manages the state of the notes and handles adding, deleting, and editing notes. The use of `useEffect` hooks ensures that notes are loaded from and saved to local storage.

7. Adding Styling (Optional)

To make your app look better, you can add some basic styling. A simple approach is to use a CSS framework like Tailwind CSS, which is often used with Next.js projects. You can install it using:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then, configure Tailwind CSS in `tailwind.config.js` and add the following directives to your `pages/_app.js` file or import them directly in `pages/index.js`:


// tailwind.config.js
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}


// pages/_app.js
import 'tailwindcss/tailwind.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Now, you can use Tailwind CSS classes in your components to style them. For example, in the `NoteForm` and `NoteList` components, you can add classes like `bg-gray-100`, `p-4`, `rounded`, and `shadow` to style the elements. The example code above already includes Tailwind CSS classes.

Common Mistakes and How to Fix Them

1. Incorrectly Handling State Updates

One common mistake is directly modifying the state array instead of creating a new one. For example, instead of `notes.push(newNote)`, you should use `setNotes([…notes, newNote])`. This is because React’s state updates rely on comparing the previous state with the new state. If you directly modify the existing array, React might not detect the change and re-render the component. Always create a new array or object when updating state.

2. Forgetting to Bind Event Handlers

In older React code (before arrow functions), you might need to bind event handlers to the component instance. For example, if you have a method `this.handleButtonClick`, you would need to bind it in the constructor: `this.handleButtonClick = this.handleButtonClick.bind(this);`. With arrow functions, this is generally not necessary, as they automatically bind `this` to the component.

3. Not Using Keys in Lists

When rendering lists of items using `map`, always provide a unique `key` prop to each element. This helps React efficiently update the DOM. If you don’t provide a key, React might re-render the entire list whenever an item changes, which can lead to performance issues. In our example, we’re using `key={note.id}`.

4. Incorrectly Using Local Storage

Local storage only stores strings. Make sure to use `JSON.stringify()` when saving objects to local storage and `JSON.parse()` when retrieving them. Failing to do so will result in the data being stored as a string, and you’ll have trouble accessing its properties.

5. Not Handling Empty Input Fields

In the `NoteForm` component, we included a check to ensure that the title and content fields are not empty before adding a new note. It’s crucial to validate user input to prevent unexpected behavior and improve the user experience. Consider adding more robust validation, such as checking for the length of the input or the format of the data.

Key Takeaways and Best Practices

  • Component-Based Architecture: Break down your UI into reusable components for better organization and maintainability.
  • State Management: Use the `useState` hook to manage the state of your components.
  • Event Handling: Handle user interactions using event handlers.
  • Data Persistence: Use local storage to save and retrieve data.
  • Error Handling: Consider adding error handling to make your app more robust.
  • User Experience: Provide clear feedback to the user, such as displaying success or error messages.
  • Testing: Write unit tests to ensure that your components function correctly.

Advanced Features (Optional)

Once you’ve built the basic note-taking app, you can add more advanced features:

  • Note Editing: Implement a way to edit existing notes.
  • Note Deletion: Add functionality to delete notes.
  • Search Functionality: Allow users to search for notes by title or content.
  • Note Categorization: Add categories or tags to notes.
  • Rich Text Editor: Integrate a rich text editor (e.g., Draft.js, Quill) for more advanced formatting options.
  • Authentication: Add user authentication to allow multiple users to use the app.
  • Backend Integration: Use a backend database (e.g., MongoDB, PostgreSQL) to store notes instead of local storage.

These features will enhance the functionality and usability of your note-taking app, making it a more powerful and versatile tool.

This tutorial has provided a foundational understanding of building a note-taking application using Next.js. By following these steps and understanding the underlying concepts, you’ve taken a significant step towards mastering web development with React and Next.js. Remember that practice is key. Experiment with different features, explore the Next.js documentation, and build upon this foundation to create even more sophisticated and personalized web applications. The possibilities are endless, and with each project, you’ll deepen your understanding and expand your skillset. The journey of a thousand lines of code begins with a single function, and this note-taking app is a great starting point for your web development adventure.

More posts