Why Use Next.js and React Hooks in 2025?

1. Next.js – The Future of Web Development

2. React Hooks – Modern State Management

Application Overview

1. A Front end where users can add, view, and delete tasks.

2. A backend API to store and manage tasks in a database.

3. State management using React Hooks.

4. Server-side rendering for improved SEO and performance.

Initialize a New Next.js Project

npx create-next-app@latest full-stack-nextjs-hooks
cd full-stack-nextjs-hooks
npm install

This will set up a new project with all the necessary files and dependencies.

Install Required Dependencies

We need some additional libraries for database and API calls. Install them by running:

npm install mongoose axios

Organize the Folder Structure

Create the following folders and files for better project organization:

- components/
- models/
- pages/
    - api/
- utils/

Step 2: Building the Backend with Next.js API Routes

Connect to MongoDB Database

We need to set up a database to store tasks. Create a file utils/db.js and add the following code:

import mongoose from 'mongoose';

const connectDB = async () => {
    if (mongoose.connection.readyState >= 1) return;
    return mongoose.connect(process.env.MONGO_URI, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
    });
};

export default connectDB;

This function will connect our application to the MongoDB database.

Define the Task Model

Create a file models/Task.js and define the schema for tasks:

import mongoose from 'mongoose';

const TaskSchema = new mongoose.Schema({
    title: { type: String, required: true },
    completed: { type: Boolean, default: false },
});

export default mongoose.models.Task || mongoose.model('Task', TaskSchema);

import connectDB from '../../utils/db';
import Task from '../../models/Task';

connectDB();

export default async function handler(req, res) {
    const { method } = req;
    switch (method) {
        case 'GET':
            const tasks = await Task.find();
            res.status(200).json(tasks);
            break;
        case 'POST':
            const newTask = await Task.create(req.body);
            res.status(201).json(newTask);
            break;
        case 'DELETE':
            const { id } = req.query;
            await Task.findByIdAndDelete(id);
            res.status(204).end();
            break;
        default:
            res.setHeader('Allow', ['GET', 'POST', 'DELETE']);
            res.status(405).end(`Method ${method} Not Allowed`);
    }
}

This API handles adding, retrieving, and deleting tasks.

Step 3: Creating the Frontend with React Hooks

Task Component

Create a file components/Task.js:

const Task = ({ task, onDelete }) => {
    return (
        <div>
            <h3>{task.title}</h3>
            <button onClick={() => onDelete(task._id)}>Delete</button>
        </div>
    );
};

export default Task;

This component displays each task with a delete button.

Main Page

Modify pages/index.js to manage tasks:

import { useState, useEffect } from 'react';
import axios from 'axios';
import Task from '../components/Task';

export default function Home() {
    const [tasks, setTasks] = useState([]);
    const [newTask, setNewTask] = useState('');

    useEffect(() => {
        axios.get('/api/tasks').then((response) => setTasks(response.data));
    }, []);

    const addTask = async () => {
        const response = await axios.post('/api/tasks', { title: newTask });
        setTasks([...tasks, response.data]);
        setNewTask('');
    };

    const deleteTask = async (id) => {
        await axios.delete(`/api/tasks?id=${id}`);
        setTasks(tasks.filter((task) => task._id !== id));
    };

    return (
        <div>
            <h1>Task Manager</h1>
            <input type="text" value={newTask} onChange={(e) => setNewTask(e.target.value)} />
            <button onClick={addTask}>Add Task</button>
            {tasks.map((task) => (
                <Task key={task._id} task={task} onDelete={deleteTask} />
            ))}
        </div>
    );
}

Step 4: Deploy the Application

1. Set Up Environment Variables:

Create .env.local and add your MongoDB connection string:

MONGO_URI=your_mongo_connection_string

2️. Deploy to Vercel:

Conclusion