Muke Johnbaptist
August 24, 2024
Task management applications are a great way to practice building fullstack projects. In this tutorial, we'll create a simple task manager using Next.js and TypeScript.
npx create-next-app@latest task-manager --typescript cd task-manager
npm install axios react-query
type Task = { id: string; title: string; completed: boolean; };
const TaskList: React.FC<{ tasks: Task[] }> = ({ tasks }) => { return ( <ul> {tasks.map((task) => ( <li key={task.id}> <span>{task.title}</span> <input type="checkbox" checked={task.completed} /> </li> ))} </ul> ); };
import { useQuery } from 'react-query'; import axios from 'axios'; const fetchTasks = async (): Promise<Task[]> => { const response = await axios.get('/api/tasks'); return response.data; }; const TaskManager: React.FC = () => { const { data: tasks, isLoading } = useQuery('tasks', fetchTasks); if (isLoading) return <p>Loading...</p>; return <TaskList tasks={tasks} />; };
Building a task manager with Next.js and TypeScript is a practical way to learn how to structure fullstack projects, manage state, and create dynamic UIs. This tutorial covers the basics, but you can extend the application by adding features like task editing, deletion, and more.