How to Create a To-Do List App with Next.js
November 27th, 2024
A To-Do List is one of the simplest yet most useful apps to help you stay productive. Building one with Next.js not only helps you organize tasks but also improves your skills in React and modern web development. In this guide, we’ll walk you through the steps to create a basic To-Do List app using Next.js.
Why Use Next.js?
- Server-Side Rendering (SSR) for improved performance and SEO.
- Built-in API routes to manage server-side logic.
- Easy integration with modern tools and libraries.
Step 1: Set Up Your Next.js Project
Create a new Next.js project:
npx create-next-app@latest to-do-list
cd to-do-list
Install dependencies: We’ll use uuid for generating unique IDs for tasks.
npm install uuid
Step 2: Build the To-Do List App
Create the main page: In pages/index.js, add the following code:
import { useState } from "react";
import { v4 as uuidv4 } from "uuid";
export default function Home() {
const [tasks, setTasks] = useState([]);
const [task, setTask] = useState("");
const addTask = () => {
if (task.trim()) {
setTasks([...tasks, { id: uuidv4(), text: task, completed: false }]);
setTask("");
}
};
const toggleComplete = (id) => {
setTasks(
tasks.map((task) =>
task.id === id ? { ...task, completed: !task.completed } : task
)
);
};
const deleteTask = (id) => {
setTasks(tasks.filter((task) => task.id !== id));
};
return (
To-Do List
style={{
padding: "10px",
width: "calc(100% - 20px)",
marginBottom: "10px",
}}
/>
-
{tasks.map((task) => (
toggleComplete(task.id)}>{task.text}
))}
);
}
Styling the app: For simplicity, inline styles are used. Feel free to use CSS modules or Tailwind CSS for better styling.
Step 3: Run the App
Start the development server:
npm run dev
Open your browser and navigate to http://localhost:3000. You should see your To-Do List app in action!
Features You Can Add
Persistent Storage: Save tasks using localStorage or integrate with a backend API.
Filter Options: Add filters for “All,” “Completed,” and “Incomplete” tasks.
Drag and Drop: Use a library like react-beautiful-dnd to reorder tasks.
Conclusion
This simple To-Do List app demonstrates the power of Next.js and React for building functional web applications. By extending this project, you can explore more advanced concepts like backend integration, authentication, or state management with libraries like Redux.
Start coding and take control of your tasks! 🚀