Nextjs Connecting Api Routes To Databases Complete Guide

Prerequisites

1. Node.js and npm installed.
2. Familiarity with JavaScript and React.
3. Basic understanding of Next.js routing.

Step 1: Setting Up Your Next.js Project

Firstly, create a new Next.js project. Open your terminal and run:

npx create-next-app@latest my-nextjs-project
cd my-nextjs-project

Step 2: Install Dependencies

Install Mongoose to interact with MongoDB:

npm install mongoose

Step 3: Create a MongoDB Database

You can use a local MongoDB instance or a cloud-based service like MongoDB Atlas.

For this example, we'll use MongoDB Atlas. Sign up, create a cluster, and get your connection string.

Step 4: Connect to MongoDB in api Directory

Next.js allows you to create serverless functions within the pages/api directory. However, we need a way to connect to our MongoDB database before handling requests. To achieve this, create a new file dbConnect.js inside a custom lib folder:

mkdir lib
touch lib/dbConnect.js

Add the following code to lib/dbConnect.js:

// lib/dbConnect.js

import mongoose from 'mongoose';

const MONGODB_URI = process.env.NEXT_PUBLIC_MONGODB_URI || 'YOUR_MONGODB_CONNECTION_STRING';

// Check if we have a connection to the database or if it's currently connecting:
let cachedDb = null;

async function dbConnect() {
  if (cachedDb) {
    return cachedDb;
  }

  try {
    const db = await mongoose.connect(MONGODB_URI, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });

    cachedDb = db;

    return db;
  } catch (error) {
    console.error(error);
    throw new Error('Failed to connect to MongoDB');
  }
}

export default dbConnect;

Replace 'YOUR_MONGODB_CONNECTION_STRING' with your actual MongoDB connection string. It's a good practice to store such sensitive information in environment variables.

In your .env.local file, add the following line:

NEXT_PUBLIC_MONGODB_URI=mongodb+srv://yourusername:yourpassword@yourcluster.mongodb.net/test?retryWrites=true&w=majority

Make sure to adjust it based on your MongoDB setup.

Step 5: Create a Mongoose Model

We'll define a simple User model for demonstration purposes.

mkdir models
touch models/User.js

Add this code to models/User.js:

// models/User.js

import mongoose from 'mongoose';

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  email: {
    type: String,
    required: true,
    unique: true,
    index: true,
    lowercase: true,
  },
  password: {
    type: String,
    required: true
  },
});

const User = mongoose.models.User || mongoose.model('User', userSchema);

export default User;

Step 6: Create API Route to Handle Requests

Let's create a REST API endpoint at /api/users that can handle different types of HTTP requests such as POST, GET, PUT, and DELETE.

Creating the /pages/api/users.js File

touch pages/api/users.js

Adding CRUD Operations Inside /pages/api/users.js

Here is an exhaustive example of implementing basic CRUD operations:

// pages/api/users.js

import dbConnect from '../../lib/dbConnect';
import User from '../../models/User';

export default async function handler(req, res) {
  await dbConnect();

  switch (req.method) {
    case 'GET':
      try {
        const users = await User.find({});
        return res.status(200).json({ success: true, data: users });
      } catch (error) {
        return res.status(400).json({ success: false });
      }
    case 'POST':
      try {
        const user = new User(req.body);
        await user.save();
        return res.status(201).json({ success: true, data: user });
      } catch (error) {
        return res.status(400).json({ success: false });
      }
    case 'PUT':
      try {
        // Assume id is passed in the URL as /api/users?id=ID_VALUE
        const { id } = req.query;
        const updatedUser = await User.findByIdAndUpdate(id, req.body, {
          new: true,
          runValidators: true,
        });

        return res.status(200).json({ success: true, data: updatedUser });
      } catch (error) {
        return res.status(400).json({ success: false });
      }
    case 'DELETE':
      try {
        const { id } = req.query;
        const deletedUser = await User.findByIdAndDelete(id);

        // Verify if the user exists before deletion
        if (!deletedUser) {
          return res.status(404).json({ success: false, message: 'User not found' });
        }

        return res.status(200).json({ success: true, data: deletedUser });
      } catch (error) {
        return res.status(400).json({ success: false });
      }
    default:
      return res.status(405).json({ success: false });
  }
}

Testing the Endpoints

You can test these endpoints using tools like Postman or even the browser.

GET Request

URL: http://localhost:3000/api/users

Method: GET

Description: Fetches all users from the users collection in your MongoDB database.

POST Request

URL: http://localhost:3000/api/users

Method: POST

Body:

{
  "name": "John Doe",
  "email": "john.doe@example.com",
  "password": "securepassword"
}

Description: Inserts a new user into the users collection.

PUT Request

URL: http://localhost:3000/api/users?id=SOME_USER_ID_HERE

Method: PUT

Body:

{
  "name": "Updated Name",
  "email": "updated.email@example.com"
}

Description: Updates an existing user identified by the given id.

DELETE Request

URL: http://localhost:3000/api/users?id=SOME_USER_ID_HERE

Method: DELETE

Description: Deletes an existing user identified by the given id.

Step 7: Add CORS Middleware

If you plan to call this API from another domain, you'll likely encounter CORS issues. To handle CORS in Next API routes, you can install nextjs-middleware-cors.

Install the package:

npm install nextjs-middleware-cors

Modify your API route to include CORS handling:

// pages/api/users.js

import dbConnect from '../../lib/dbConnect';
import User from '../../models/User';
import cors from 'nextjs-middleware-cors';

export default async function handler(req, res) {
  // Run CORS middleware
  res = await cors(req, res);

  await dbConnect();

  switch (req.method) {
    case 'GET':
      try {
        const users = await User.find({});
        return res.status(200).json({ success: true, data: users });
      } catch (error) {
        return res.status(400).json({ success: false });
      }
    case 'POST':
      try {
        const user = new User(req.body);
        await user.save();
        return res.status(201).json({ success: true, data: user });
      } catch (error) {
        return res.status(400).json({ success: false });
      }
    case 'PUT':
      try {
        const { id } = req.query;
        const updatedUser = await User.findByIdAndUpdate(id, req.body, {
          new: true,
          runValidators: true,
        });

        return res.status(200).json({ success: true, data: updatedUser });
      } catch (error) {
        return res.status(400).json({ success: false });
      }
    case 'DELETE':
      try {
        const { id } = req.query;
        const deletedUser = await User.findByIdAndDelete(id);

        if (!deletedUser) {
          return res.status(404).json({ success: false, message: 'User not found' });
        }

        return res.status(200).json({ success: true, data: deletedUser });
      } catch (error) {
        return res.status(400).json({ success: false });
      }
    default:
      return res.status(405).json({ success: false });
  }
}

Step 8: Running Your Application

Run your Next.js application using:

npm run dev

This will start your development server usually on http://localhost:3000/. You can now call your API endpoints accordingly.

Step 9: Handling Errors More Gracefully

You might want to provide more detailed error messages to the frontend for better debugging.

Modify each case block to catch specific errors and return meaningful responses: