Next.js with mongodb difficulties

[cold whale]

Hey all! I'm struggling to make this happen. I am moving to a database and want to configure everything correctly. Currently local is kind of working but staging deploys aren't.

Connections to db are working well.

app/api/get/route.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { connectMongoDB } from '@/lib/mongodb';

import Product from "@/models/ProductModel";
import { NextResponse } from "next/server";
import mongoose from "mongoose";

export async function GET() {
  console.log("hit get post", new Date().getSeconds());
  try {
    await connectMongoDB();
    const get = await Product.find({}).limit(60);

    return new NextResponse(JSON.stringify(get));
  } catch (error) {
    console.log("error from route", error);
    return new NextResponse("Error");
  }
}```

models/ProductModel.ts
```ts
import mongoose from "mongoose";
const Product = new mongoose.Schema();
module.exports = mongoose.models.Product || mongoose.model("Product", Product);

The error on staging deploys is: Type error: Module '"/vercel/path0/models/ProductModel"' has no default export.

[calm isle]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[lapis frost]

You forgot to export Product

In your product model file

export default Product

[cold whale]

Yeah I tried that, but I get another bug then that breaks local

I add: export default Product;

The error is Unhandled Runtime Error Error: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

On the find in this line: const get = await Product.find({}).limit(60);

Says: ```Property 'find' does not exist on type 'Schema<any, Model<any, any, any, any, any, any>, {}, {}, {}, {}, DefaultSchemaOptions, { [x: string]: unknown; }, Document<unknown, {}, FlatRecord<{ [x: string]: unknown; }>> & FlatRecord<...> & Required<...>>'.ts(2339)

@lapis frost any idea?

[lapis frost]

That’s a typescript error

I think you’re doing something wrong with the way you’re using mongoose

I’m not very familiar with it sorry

But what I would suggest to do is find a nextjs example on GitHub using mongoose

[cold whale]

Yeah I thinkk you're right - do you know how to interact with mongodb without mongoose? I really don't need it

[lapis frost]

You’d use another mongo client

I don’t use mongo so I can’t recommend any

[cold whale]

Makes sense, thank!

[lapis frost]

https://github.com/vercel/next.js/tree/canary/examples/with-mongodb-mongoose

[cold whale]

Quick other question, how can I pass query params to my get request?

[lapis frost]

Look at that example and see how they use mongoose

Query parameters are sent in the url

/foobar?param=123

[cold whale]

Sure, how can I read them inside my get function

[lapis frost]

In the get function

You can extract them from the request

I don’t remember the exact syntax

Just Google for it or ask chat gpt

[cold whale]

I am new to this so examples I find keep being too complex

[lapis frost]

export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const id = searchParams.get('id')
const res = await fetch(https://data.mongodb-api.com/product/${id}, {
headers: {
'Content-Type': 'application/json',
'API-Key': process.env.DATA_API_KEY!,
},
})
const product = await res.json()

return Response.json({ product })
}

https://nextjs.org/docs/app/building-your-application/routing/route-handlers

You’ll need to get used to the complexity I’m afraid

I suggest going through the official nextjs tutorial

It will really help

Since it’ll expose you to all these topics

And it won’t seem as complex anymore

[cold whale]

Will do, thank you!

[lapis frost]

Good luck.

[calm isle]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1208520802581086309 message)

[solid pecan]

here is an example from my project

import mongoose from 'mongoose'

// the collection is created by NextAuth. This model exists so we can query it.
export interface IAccount extends mongoose.Document {
  userId: mongoose.Schema.Types.ObjectId
}



/* AccountSchema will correspond to a collection in your MongoDB database. */
const AccountSchema = new mongoose.Schema<IAccount>({
  userId: {
    type: mongoose.Schema.Types.ObjectId,
  }
})

export default mongoose.models.Account || mongoose.model<IAccount>('Account', AccountSchema)

that allows me to do

Account.find.......

[cold whale]

Thanks! Do you know if we need to configure anything else on vercel to get the backend/db access part working?

[solid pecan]

I can't answer for vercel

as long as your db is reachable on the network then you should be good

since you didn't get an error on the db connect part, then I'd imagine it's reachable

[cold whale]

I am getting this error on my browser in a staging build:

Digest: 1634295334```
I also don't see my data coming in when I navigate to the get endpoint. On local I do

One vercel I see:

  digest: '1634295334'
}```

[solid pecan]

you'll have to find some more detailed logs, those only indicate that an error ocurred, they don't state what the error was

[cold whale]

Any idea how?

[solid pecan]

I'm not familiar with vercel sorry

you could add more console.log logs around the database stuff

to pinpoint where the error is ocurring

but it won't tell you what the error is

or wrap the entire db code in a try/catch and then console log the exception

https://vercel.com/docs/observability/runtime-logs

this link says there is a logs tab

[cold whale]

I am seeing this error actually:

    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (node:internal/deps/undici/undici:4747:19)
    at successSteps (node:internal/deps/undici/undici:4718:27)
    at fullyReadBody (node:internal/deps/undici/undici:1433:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async specConsumeBody (node:internal/deps/undici/undici:4727:7)
    at async R (/var/task/.next/server/app/page.js:1:50563)```

[solid pecan]

that's probably due to your front end expecting json but instead it's getting html that says INTERNAL SERVER ERROR

[cold whale]

Yeah

[solid pecan]

so still not telling us what the error is

[cold whale]

When I go directly to the <url>/api/get I don't get an error but it returns an empty list. Which is confusing. My db isn't local

[solid pecan]

is your db empty?

[cold whale]

/app/api/ge/route.ts

import type { NextApiRequest, NextApiResponse } from "next";
import { connectMongoDB } from '@/lib/mongodb';

// import Product from "@/models/ProductModel";
import Product, { Products } from "@/models/ProductModel";
import { NextResponse } from "next/server";
import mongoose from "mongoose";

export async function GET() {
  console.log("hit get post", new Date().getSeconds());
  try {
    await connectMongoDB();
    // const get = await Product.find({'reddit_subreddit': 'EDCexchange'}).skip(60).limit(60);
    const get_res = await Product.find({}).limit(60);
    return new NextResponse(JSON.stringify(get_res));
  } catch (error) {
    console.log("error from route", error);
    return new NextResponse("Error");
  }
}```

Nope

It's got a lot in it

Local I see a bunch

[solid pecan]

what's the http status code in chrome developer tools network tab

[cold whale]

500

So I guess it isn't reaching out to the right place maybe

[solid pecan]

so it's 500 when called from your client code, but not 500 when called directly from your browser?

[cold whale]

The request url is different than the url I go to

In my code I have this:

const baseUrl = process.env.VERCEL_URL ? 'https://' + process.env.VERCEL_URL : 'http://localhost:3000'
const products_res = await fetch(`${baseUrl}/api/get`)```

I guess this is a server side component so I don't see the actuall calls in my browser

this 500 should just be because page showing up

[solid pecan]

you need to find the reason for that 500 error in the vercel logs

did you checkout the link I sent above

[cold whale]

Looking into it now

[solid pecan]

and you shouldn't be calling your own API from a server component

[cold whale]

Maybe that's it - can server components access data that updates?

[solid pecan]

server components can access anything on the internet

when the data updates though, your app doesn't know to go refetch it

unless you've coded it to

calling your own api from within a server component won't cause an error

it's just not good practice

[cold whale]

So I have a simple one page app that shows a bunch of product listings. How would I show them in a system that has a db?

[solid pecan]

your server component can either fetch the data from the db, and then render that data (or pass it to a client component to render it)

Or, your client component can make an API call to your server, and then your server will fetch the data from the db

The code that reads from the database in your API handler should also be in your server component.

Calling your own API from a server component creates a needless trip to the internet

[cold whale]

I see what you're saying - is it ok to interact with a db directly in a server component?

[solid pecan]

yes all code in a server component runs on the server

so it's ok to have sensitive information there

[cold whale]

I was worried about constantly opening and closing db connections

[solid pecan]

since vercel is "serverless", and not long living web servers, I would get in the habbit of closing the db connection after fulfilling the request

[cold whale]

I guess I could create a proper backend - I'm a lt more comfortable with python

Or keep opening and closing connections

[solid pecan]

I wouldn't worry about closing connections

I don't think that justifies building a differnet backend

but of course, use what you're comfortable with

[cold whale]

So I can basically do something like this in my page.tsx

export const getServerSideProps: GetServerSideProps<Props> = async () => {
  await dbConnect();

  /* find all the data in our database */
  const result = await Pet.find({});

  /* Ensures all objectIds and nested objectIds are serialized as JSON data */
  const pets = result.map((doc) => {
    const pet = JSON.parse(JSON.stringify(doc));
    return pet;
  });

  return { props: { pets: pets } };
};```

Grabbed that from an example on github

New connection each time the page loads

[solid pecan]

yep that's what I'm doing

The only reason I mentioned closing the connection is because I've seen some other people on here posting about connection limits being reached

[cold whale]

Cool, let me try that now - thanks so much for the help!