I feel like I'm losing my sanity. I've attempted this multiple times by now. Currently, I'm working on setting up an authentication flow using a project tutorial I stumbled upon on YouTube. The goal is to establish the flow with Next.js and Mongoose. Initially, I thought the issue might be related to using React server actions, so I switched to API calls instead, but that didn't solve the problem either.
Below is the basic registration form:
"use client";
import Link from "next/link";
import React, { useEffect } from "react";
import {useRouter} from "next/navigation";
import axios from "axios";
import { toast } from "react-hot-toast";
// Rest of the code goes here... (omitted for brevity)
This form interacts with the following API route:
import {connect} from "@/dbConfig/dbConfig";
import User from "@/models/userModel";
import { NextRequest, NextResponse } from "next/server";
import bcryptjs from "bcryptjs";
// Rest of the code goes here... (omitted for brevity)
Additionally, the script connects to the database as shown below:
import mongoose from 'mongoose';
export async function connect() {
// Database connection setup...
}
I have configured environmental variables for the database, but despite this, the application only seems to work in a local environment. Uploading it to Vercel or Heroku results in failure. When deployed in production, the following error message is displayed:
Error message details...Though I don't expect you to solve this complex issue for me, as I struggle to do so myself, good luck if you decide to take on the challenge. I've even tried creating a new Next.js project from scratch, implementing a basic registration form, server action, and API routes for testing. While everything functions smoothly in development, deploying to Heroku or Vercel keeps resulting in 504 or 503 errors. It's been quite a frustrating experience, to say the least.