Search for a command to run...
Leverage API Routes to Create a Comprehensive Full-Stack Application
Our company comprises seasoned professionals, each an expert in their field. Customer satisfaction is our top priority, exceeding clients' needs. We ensure competitive pricing and quality in web and mobile development without compromise.
helpful thank you
Great Article!
very helpful thank you
A modern community for developers to learn, share, and grow together.
Discover the most practical AI tools that save time, boost productivity, and actually work.
Unlock Productivity, Creativity, and Growth Using These Free AI Tools in 2025
"A Developer’s Guide to the Best Payment Processors for Modern Web Apps"
Protect your privacy, secure your data, and browse with peace of mind.
Next.js is not just a front-end framework; it also allows you to build powerful full-stack applications with its integrated API routes. This feature enables you to define backend endpoints directly within your Next.js project, providing a seamless way to handle server-side logic, data fetching, and integrations. In this blog, we'll explore how to use API routes in Next.js and build a full-stack application.
API routes in Next.js allow you to create serverless functions as part of your application. These routes can handle HTTP requests and are defined within the pages/api directory. Each file in this directory maps to an endpoint in your application.
Unified Project Structure:
Serverless Architecture:
Flexibility:
Let's build a simple full-stack application with Next.js. We'll create a task management app with the following features:
A form to add new tasks.
A list of tasks fetched from an API route.
The ability to delete tasks.
Ensure you have a Next.js project set up. If not, create a new one:
npx create-next-app task-manager
cd task-manager
We'll create API routes for managing tasks. First, let's create a mock database using an array.
Create a Mock Database
Create a new file called data.js in the root directory:
// data.js
let tasks = [];
export const getTasks = () => tasks;
export const addTask = (task) => {
tasks.push(task);
};
export const deleteTask = (id) => {
tasks = tasks.filter(task => task.id !== id);
};
Create the Tasks API
Create a new file called pages/api/tasks.js:
// pages/api/tasks.js
import { getTasks, addTask, deleteTask } from '../../data';
export default function handler(req, res) {
if (req.method === 'GET') {
// Return all tasks
const tasks = getTasks();
res.status(200).json(tasks);
} else if (req.method === 'POST') {
// Add a new task
const task = req.body;
addTask(task);
res.status(201).json(task);
} else if (req.method === 'DELETE') {
// Delete a task
const { id } = req.body;
deleteTask(id);
res.status(204).end();
} else {
res.setHeader('Allow', ['GET', 'POST', 'DELETE']);
res.status(405).end(`Method ${req.method} Not Allowed`);
}
}
Create the Task Form
Create a new file called components/TaskForm.js:
// components/TaskForm.js
import { useState } from 'react';
const TaskForm = ({ onAddTask }) => {
const [task, setTask] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
if (task.trim()) {
const newTask = { id: Date.now(), task };
await fetch('/api/tasks', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(newTask),
});
onAddTask(newTask);
setTask('');
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Add a new task"
required
/>
<button type="submit">Add Task</button>
</form>
);
};
export default TaskForm;
Create the Task List
Create a new file called components/TaskList.js:
// components/TaskList.js
const TaskList = ({ tasks, onDeleteTask }) => {
const handleDelete = async (id) => {
await fetch('/api/tasks', {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ id }),
});
onDeleteTask(id);
};
return (
<ul>
{tasks.map((task) => (
<li key={task.id}>
{task.task}
<button onClick={() => handleDelete(task.id)}>Delete</button>
</li>
))}
</ul>
);
};
export default TaskList;
Create the Main Page
Modify pages/index.js to include the task form and task list components:
// pages/index.js
import { useState, useEffect } from 'react';
import TaskForm from '../components/TaskForm';
import TaskList from '../components/TaskList';
export default function Home() {
const [tasks, setTasks] = useState([]);
useEffect(() => {
const fetchTasks = async () => {
const res = await fetch('/api/tasks');
const tasks = await res.json();
setTasks(tasks);
};
fetchTasks();
}, []);
const addTask = (task) => {
setTasks([...tasks, task]);
};
const deleteTask = (id) => {
setTasks(tasks.filter(task => task.id !== id));
};
return (
<div>
<h1>Task Manager</h1>
<TaskForm onAddTask={addTask} />
<TaskList tasks={tasks} onDeleteTask={deleteTask} />
</div>
);
}
Start the development server:
npm run dev
Explore the official Next.js documentation on API routes to learn more about advanced features and best practices. Happy coding!