DEV Community: Chinedu Onuwa

🐛 Don’t Let This Mongoose Bug Waste Your Time in Next.js

Chinedu Onuwa — Fri, 13 Jun 2025 20:27:55 +0000

I spent hours wondering why my MongoDB documents only had an _id field after saving — and the fix turned out to be ridiculously simple.

If you're using Mongoose with the Next.js App Router and noticing that only the _id is being saved to MongoDB (while fields like name, email, createdAt, and updatedAt are mysteriously missing), this article is for you.

I'll walk you through the exact bug, what caused it, and how to fix it in 3 seconds — before it wastes as much of your time as it did mine.

🔧 The Stack

I was building a simple signup API

[Nextjs 13]
MongoDB (via Mongoose)
Thunder Client (for testing)
App Router (/app/auth/signup)

Everything was fine... until it wasn’t and i started sweating, cussing and had to nose dive into nextjs documentation.

🚨 The Weird Bug

I sent a POST request to my /api/auth/signup route with this JSON body:

{
  "name": "iamonuwacj",
  "email": "iamonuwacj@example.com"
}

The Response I keep getting

{
  "_id": "665eaa...",
  "__v": 0
}

No name, no email, no createdAt, no updatedAt. Just _id.

But here’s the kicker:
✅ console.log(await req.json()) showed the correct data.
✅ The MongoDB connection was successful.
✅ No error messages were thrown.

So... why was only the _id saved?
What happened to the data I posted??

🧠 *The Real Cause *

The issue? Mongoose model caching during hot reload.
In dev mode, when the Next.js server hot-reloads, it may:
Recompile the same schema multiple times
Corrupt the internal Mongoose model
Silently break how fields are mapped and saved

In other words, my model looks fine — but Mongoose stopped applying the schema properly.

✅ The Fix

🔁 1. Restart the dev server and clear cache:

# Stop the server
Ctrl + C

# Clear the Next.js build cache
rm -rf .next

# Restart dev
npm run dev

Boom 💥. Fields started saving again, along with timestamps.

✅ 2. Use Defensive Mongoose Model Export

Make sure your model is exported like this to avoid duplicate declarations:

export default mongoose.models.User || mongoose.model('User', UserSchema);

This prevents Mongoose from re-declaring models when the app reloads.

🛠 Sample example for the models /models/User.js

import mongoose from 'mongoose';

const UserSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true }
}, { timestamps: true });

export default mongoose.models.User || mongoose.model('User', UserSchema);

/api/auth/signup/route.js

import connectDB from '@/lib/db';
import User from '@/models/User';

export async function POST(req) {
  try {
    await connectDB();

    const body = await req.json();
    const { name, email } = body;

    const user = new User({ name, email });
    await user.save();

    return new Response(JSON.stringify(blog), {
      status: 201,
      headers: { 'Content-Type': 'application/json' }
    });

  } catch (err) {
    console.error("Error:", err);
    return new Response(JSON.stringify({ error: 'Server error' }), {
      status: 500
    });
  }
}

🔎 Thunder Client Request (for testing)

POST http://localhost:3000/api/auth/signup
Headers: Content-Type: application/json
Body:

{
  "name": "iamonuwacj",
  "email": "iamonuwacj@example.com"
}

✅ Now, It Works!

MongoDB now saved the document like this:

{ "_id": "665eaa...", "name": "iamonuwacj", "email": "iamonuwacj@example.com", "createdAt": "2025-06-13T18:55:23.123Z", "updatedAt": "2025-06-13T18:55:23.123Z", "__v": 0 }

🧠 Takeaways

When using Mongoose + Next.js App Router, always:
Export models defensively
Clear .next cache if things act weird
If only _id is saved:
Your schema isn't applied correctly
You're likely using a stale or broken model

Have You Faced This?

Let me know if this saved your day (or night)!
I would love to hear your Mongoose war stories

Happy debugging

Form Validation made easy for beginners. Learn how to monitor states in react

Chinedu Onuwa — Wed, 23 Apr 2025 02:46:25 +0000

Chinedu Onuwa

Apr 23 '25

Beginner's Guide to Form Validation

#beginners #tutorial #react #webdev

Comments 2

3 min read

Beginner's Guide to Form Validation

Chinedu Onuwa — Wed, 23 Apr 2025 02:43:54 +0000

When building web applications, we use forms to collect inputs from users. Every form field serves a purpose on the application. Forms makes collection of user input like: login details, sign-up information or user feedback easy to collect and analyse.

What is Form Validation?

Form validation is the process of checking if the data entered by a user is correct and complete before sending it to the server
Form validation helps to prevent users from submitting a form with invalid or missing information. For example we can check if:

the email typed is correct
password is long enough
No required field is empty

In this article, I will work you through on how to do basic form validation with reactjs

Getting Started

We will build a simple signup form with three fields:

Email
Password
Username

Step by Step Example

*Basic Setup *

Firstly, we will create a react app with:
npm create vite@latest
follow the prompt as shown below

Now run the commands:

  cd <formValidation>
  npm install
  npm run dev

replace formValidation with your project name

Now lets create our signUp Form

//SignUpForm.jsx

import React, { useState } from 'react'

const SignUpForm = () => {
    // use useState to monitor all the input values and error state
    const [userName, setUserName] = useState("")
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    const [error, setError] = useState({})


    // submit the form
    const handleSubmit = (e) => {
        e.preventDefault()

        let formErrors = {}

        // validateing the username field
        if(!userName){
            formErrors.userName = "User Name cannot be empty"
        }


        // validateing the email field
        if(!email){
            formErrors.email = "Email is required"
        }else if(!/\S+@\S+\.\S+/.test(email)){
            formErrors.email = "Email is Invalid"
        }

        // validating the password field
        if(!password){
            formErrors.password = "Password is required"
        }else if(password.length < 8){
            formErrors.password = "Password must be at least 8 characters"
        }

        //add the errors
        setError(formErrors)

        // submit if there is no error and reset the input values
        if(Object.keys(formErrors).length === 0) {
            alert("Form submitted successfully")
            setEmail("")
            setPassword("")
            setUserName("")
        }
    }


  return (
    <form className='form-container' onSubmit={handleSubmit}>
        <h2>Sign Up</h2>

        <div className='form-group'>
            <label htmlFor="">Username</label>
            <input type="text"
                value={userName}
                onChange={(e) => setUserName(e.target.value)}
            />

            {error.userName &&  <p className='error'>{error.userName}</p>}
        </div>
        <div className='form-group'>
            <label htmlFor="">Email</label>
            <input type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
            />
            {error.email &&  <p className='error'>{error.email}</p>}
        </div>
        <div className='form-group'>
            <label htmlFor="">Password</label>
            <input type="password"
                value={password}
                onChange={(e) => {setPassword(e.target.value)}}
            />
            {error.password &&  <p className='error'>{error.password}</p>}
        </div>

        <button>Submit</button>
    </form>
  )
}

export default SignUpForm

//App.jsx

import './App.css'
import SignUpForm from './signUpForm'

function App() {


  return (
    <div className='container'>
      <SignUpForm />
    </div>
  )
}

export default App

For the CSS

//App.css

* {
    padding: 0;
    margin: 0;
}

.container {
    height: 100vh;
    background-color: gray;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-container {
    min-width: 400px;
    background-color: rgb(158, 128, 186);
    padding: 20px;
    border-radius: 10px;
}

h2 {
    font-size: 30px;
    margin-bottom: 30px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 30px;
    position: relative;
}

.error {
    position: absolute;
    bottom: -18px;
    left: 5px;
    color: red;
}


input {
    padding: 10px 20px;
    background-color: gray;
    border: none;
}

label {
    font-size: 20px;
}

button {
    width: 100%;
    padding: 10px;
    background: #000;
    color: white;
}