Mastering Next.js: Building a Simple To-Do App with State Management

Written by

learnmodernjavascript

in

In the world of web development, managing state effectively is crucial for building dynamic and interactive user interfaces. Whether you’re a seasoned developer or just starting, understanding how to manage state is fundamental. This tutorial will guide you through building a simple To-Do application using Next.js, focusing on state management with the built-in `useState` hook. We’ll explore how to create, read, update, and delete to-do items, providing a practical, hands-on learning experience. This project will not only teach you the basics of state management but also provide a solid foundation for more complex Next.js applications.

Why State Management Matters

Imagine a simple task: you want to build a counter that increments every time you click a button. Without state management, the counter wouldn’t remember its value after each click. State management is the mechanism that allows your application to remember and update data, ensuring that your UI reflects the current state of your application. In the context of a To-Do app, the state includes the list of to-do items, whether they’re completed, and any other associated metadata. Without proper state management, your app would be unable to store, retrieve, or manipulate this essential information. This lack of functionality would render the application useless.

Prerequisites

Before diving in, make sure you have the following:

  • Node.js and npm (or yarn) installed on your machine.
  • A basic understanding of JavaScript and React.
  • A code editor (like VS Code) for writing and editing code.

Setting Up Your Next.js Project

First, let’s create a new Next.js project. Open your terminal and run the following command:

npx create-next-app todo-app

This command creates a new Next.js project named “todo-app”. Navigate into your project directory:

cd todo-app

Next, start the development server:

npm run dev

This will start the development server, and you can access your app by opening http://localhost:3000 in your browser.

Building the To-Do App Components

1. The `TodoItem` Component

Create a new component to represent a single to-do item. Create a file named `components/TodoItem.js` and add the following code:

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

function TodoItem({ todo, onDelete, onToggle }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={() => onToggle(todo.id)}
        style={{ marginRight: '8px' }}
      />
      <span style={{ textDecoration: todo.completed ? 'line-through' : 'none', flexGrow: 1 }}>
        {todo.text}
      </span>
      <button onClick={() => onDelete(todo.id)} style={{ marginLeft: '8px' }}>Delete</button>
    </div>
  );
}

export default TodoItem;

This component takes three props: `todo` (an object representing the to-do item), `onDelete` (a function to delete the item), and `onToggle` (a function to toggle the item’s completion status). It renders a checkbox, the to-do item’s text, and a delete button.

2. The `TodoList` Component

Create a file named `components/TodoList.js` and add the following code:

// components/TodoList.js
import React from 'react';
import TodoItem from './TodoItem';

function TodoList({ todos, onDelete, onToggle }) {
  return (
    <div>
      {todos.map(todo => (
        <TodoItem
          key={todo.id}
          todo={todo}
          onDelete={onDelete}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default TodoList;

This component receives an array of `todos`, as well as `onDelete` and `onToggle` functions as props. It maps over the `todos` array and renders a `TodoItem` component for each to-do item.

3. The `TodoForm` Component

Create a file named `components/TodoForm.js` and add the following code:

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

function TodoForm({ onAdd }) {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (text.trim() !== '') {
      onAdd(text);
      setText('');
    }
  };

  return (
    <form onSubmit={handleSubmit} style={{ marginBottom: '16px' }}>
      <input
        type="text"
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Add a to-do..."
        style={{ marginRight: '8px', padding: '8px', borderRadius: '4px', border: '1px solid #ccc' }}
      />
      <button type="submit" style={{ padding: '8px 16px', borderRadius: '4px', backgroundColor: '#4CAF50', color: 'white', border: 'none', cursor: 'pointer' }}>Add</button>
    </form>
  );
}

export default TodoForm;

This component allows the user to input text for a new to-do item. It uses the `useState` hook to manage the input field’s value. When the form is submitted, it calls the `onAdd` function passed as a prop, passing the entered text.

4. The `Home` Component

Now, let’s modify the `pages/index.js` file to integrate these components and manage the to-do items’ state. Replace the content of `pages/index.js` with the following code:

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

function Home() {
  const [todos, setTodos] = useState([]);

  // Load todos from local storage when the component mounts
  useEffect(() => {
    if (typeof window !== 'undefined') {
      const storedTodos = localStorage.getItem('todos');
      if (storedTodos) {
        setTodos(JSON.parse(storedTodos));
      }
    }
  }, []);

  // Save todos to local storage whenever the todos state changes
  useEffect(() => {
    if (typeof window !== 'undefined') {
      localStorage.setItem('todos', JSON.stringify(todos));
    }
  }, [todos]);

  const addTodo = (text) => {
    const newTodo = {
      id: Date.now(), // Use Date.now() for a simple unique ID
      text,
      completed: false,
    };
    setTodos([...todos, newTodo]);
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const toggleTodo = (id) => {
    setTodos(
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
      <h2>My To-Do List</h2>
      <TodoForm onAdd={addTodo} />
      <TodoList todos={todos} onDelete={deleteTodo} onToggle={toggleTodo} />
    </div>
  );
}

export default Home;

In this component:

  • We use the `useState` hook to manage the `todos` state.
  • `addTodo` adds a new to-do item to the `todos` array.
  • `deleteTodo` removes a to-do item from the `todos` array.
  • `toggleTodo` toggles the completion status of a to-do item.
  • We pass the `todos`, `deleteTodo`, and `toggleTodo` functions as props to the `TodoList` component.
  • We pass the `addTodo` function to the `TodoForm` component.

Understanding `useState`

The `useState` hook is a fundamental concept in React (and thus, Next.js) for managing state within functional components. It allows you to add state to function components. Here’s a breakdown:

const [state, setState] = useState(initialValue);
  • `state`: The current value of the state.
  • `setState`: A function that updates the state. When you call `setState`, React re-renders the component.
  • `initialValue`: The initial value of the state.

In our To-Do app, we use `useState` to manage the `todos` array. When a new to-do item is added, the `addTodo` function is called, which updates the `todos` state using `setTodos`. React then re-renders the `TodoList` component, displaying the updated list of to-do items.

Adding Functionality: Delete and Toggle

To implement the delete and toggle functionalities, we added the `deleteTodo` and `toggleTodo` functions. These functions modify the `todos` state by creating a new array based on the current state. This ensures that React detects the change and re-renders the component.

The `deleteTodo` function uses the `filter` method to create a new array that excludes the to-do item with the specified ID. The `toggleTodo` function uses the `map` method to create a new array where the completed status of the to-do item with the specified ID is toggled. These are examples of immutability, a core concept in React that helps prevent unexpected side effects.

Styling the Application

While the focus of this tutorial is state management, you can enhance the user experience by adding styles to your components. Here are a few examples using inline styles:

<div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>

You can also use CSS modules, styled-components, or other styling libraries for more complex styling requirements.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

1. Incorrectly Updating State

One common mistake is directly modifying the state instead of creating a new array or object. For example, don’t do this:

// Incorrect
todos.push(newTodo); // This directly modifies the original array
setTodos(todos);

Instead, create a new array:

// Correct
setTodos([...todos, newTodo]); // Creates a new array with the new item

2. Forgetting to Update the UI

If you don’t call `setState` when you want to update the UI, the changes won’t be reflected. Make sure to call the `set…` function (e.g., `setTodos`) whenever you want to update the state.

3. Using Incorrect Dependencies in `useEffect`

When using the `useEffect` hook, be careful about the dependencies you pass in the second argument (the array). If you omit a dependency that’s used inside the effect, your component may not update correctly. For example, if your effect uses the `todos` state, make sure to include `todos` in the dependency array. Failing to do so can lead to stale data.

4. Not Handling Edge Cases

Always consider edge cases. For instance, what happens if the user tries to add an empty to-do item? In the `TodoForm` component, we added a check to prevent adding empty items.

Adding Local Storage for Persistence

To make our to-do items persist across page reloads, we can use local storage. Local storage allows us to store data in the user’s browser.

We’ll use the `useEffect` hook to load to-do items from local storage when the component mounts and save them to local storage whenever the `todos` state changes. Add the `useEffect` hooks as shown in the `Home` component example above to implement this persistence.

Step-by-Step Instructions

Here’s a summary of the steps to build the To-Do app:

  1. Create a new Next.js project.
  2. Create the `TodoItem`, `TodoList`, and `TodoForm` components.
  3. In `pages/index.js`, import the components and manage the `todos` state using `useState`.
  4. Implement the `addTodo`, `deleteTodo`, and `toggleTodo` functions to update the state.
  5. Pass the necessary props to the child components.
  6. Add basic styling to enhance the user experience.
  7. Implement local storage to persist to-do items.

Key Takeaways

In this tutorial, we’ve covered the basics of state management in Next.js using the `useState` hook. Here are the key takeaways:

  • `useState` is used to manage state within functional components.
  • Always update state immutably (create new arrays or objects).
  • Use the `set…` function to update the state, which triggers a re-render.
  • Consider edge cases and handle them appropriately.
  • Use local storage to persist data across page reloads.

FAQ

1. What is state management?

State management is the process of tracking and updating the data that determines the behavior and appearance of a user interface. In React and Next.js, state management allows components to remember information and respond to user interactions.

2. Why is state management important?

State management is important because it allows your application to be interactive and dynamic. Without it, your application would be static and unable to respond to user input or changes in data.

3. What is the difference between props and state?

Props (short for properties) are used to pass data from parent components to child components. They are read-only for the child component. State, on the other hand, is managed within a component and can be changed using the `setState` function. State is private to the component.

4. How can I handle more complex state management in Next.js?

For more complex applications, you might consider using state management libraries like Redux, Zustand, or Context API. These libraries provide more advanced features like global state management, middleware, and optimized performance.

5. How can I debug state management issues?

Use the browser’s developer tools (e.g., React Developer Tools) to inspect the component’s state and props. Log the state to the console to see how it changes over time. Also, make sure you are not directly mutating the state and are creating new instances when updating the state.

Building a To-Do app with Next.js is an excellent way to grasp the fundamentals of state management. The skills you’ve acquired here will be invaluable as you delve into more complex Next.js projects. Remember that consistent practice and exploration are key to mastering state management. As you continue to build and experiment, you’ll gain a deeper understanding of how to create dynamic and responsive web applications. The flexibility of Next.js, combined with the power of React’s state management, opens doors to a wide array of possibilities. Embrace the learning journey, and continue to build and refine your skills.

More posts