TypeError [ERR_INVALID_URL]: Invalid URL in nexj.js 13 while making an api call to mongoDB database

Question

I am using Next.js-13.1 and making an api call to my database mongoDB to fetch some data and show tit on the screen. While making the call i am getting this wierd error, I am gussing it is because of axios or my database connection

Error that i am getting

My database connection code bdConnect.js

import mongoose from "mongoose";

const connection = {};

async function dbConnect() {
    if (connection.isConnected) {
        return;
    }
    mongoose.set("strictQuery", false);
    const db = await mongoose.connect(process.env.MONGO_URI)
    console.log("Database Hot!!");
    connection.isConnected = db.connections[0].readyState;
}

export default dbConnect;

My getStudent api call getStudent.js

import dbConnect from "../../utils/dbConnection";
import student from '../../models/student'
import jwt from 'jsonwebtoken';

dbConnect()
export default async function (req, res) {
    try {
        const { cookies } = req;
        const token = cookies.ourSiteJwt;
        if (!token) {
            return res.json({ message: "Invalid token!" });
        }
        const { email } = jwt.decode(token)
        const user = await student.find({ email })
        if (user) {
            const student = user[0]
            return res.json({ student })
        }
    } catch (e) {
        console.log(e);
    }
    return res.json({ "mess": "dail" })
}

My page where i want to put my data fetched from database StudentDetails.jsx

"use client";
import axios from "axios";
import { useState } from "react";
import { Tablets } from "../global/Tablet";

export function StudentDetails({}) {
  const [number, setNumber] = useState("");
  const [email, setEmail] = useState("");
  const [personalEmail, setPersonalEmail] = useState("");
  const [dob, setDob] = useState("");
  const [blood, setBlood] = useState("");
  const [addmission, setAddmission] = useState("");
  const [local, setLocal] = useState("");
  const [permanent, setPermanent] = useState("");

  async function handleStudent() {
    try {
      const res = await axios.get("http://localhost:3000/api/getStudent");
      setNumber(res["data"]["student"]["contact"]);
      setEmail(res["data"]["student"]["email"]);
      setPersonalEmail(res["data"]["student"]["personalEmail"]);
      setDob(res["data"]["student"]["dob"]);
      setBlood(res["data"]["student"]["bloodGroup"]);
      setAddmission(res["data"]["student"]["admissionType"]);
      setLocal(res["data"]["student"]["localAddress"]);
      setPermanent(res["data"]["student"]["permanentAddress"]);
    } catch (e) {
      console.log(e);
    }
  }
  handleStudent();

  return (
    <div className="flex flex-col space-y-10 text-center">
      <div className="flex flex-row space-x-10">
        <Tablets content={number} label="Phone-Number" />
        <Tablets content={email} label="College-Email" />
        <Tablets content={personalEmail} label="Personal-Email" />
        <Tablets content={dob} label="DOB" />
      </div>
      <div className="flex flex-row space-x-10">
        <Tablets content={blood} label="Blood-Group" />
        <Tablets content={addmission} label="Admission-Type" />
        <Tablets content={local} label="Local-Address" />
        <Tablets content={permanent} label="Permanent-Address" />
      </div>
    </div>
  );
}

Answer 1

When making a request with axios from the server-side in Next.js, you need to pass the entire URL instead of just the route path ( /api/getStudent ), since the server doesn't know what the current URL is on the server. To do this, make sure you use the full URL ( http://localhost:3000/api/getStudent ) in your server-side axios call (and replace 3000 with the port that your Next.js app is running with)