Encountering an error during Next.js Build
Answered
Rough harvester ant posted this in #help-forum
Rough harvester antOP
I don't understand the error. Could you provide a brief explanation, as well as a possible solution to resolve it?
Here is the code of "/" page :
import Rooms from "@/components/Rooms";
import EmptyState from "@/components/categories/EmptyState";
import getCurrentUser from "./actions/getCurrentUser";
import getListings from "./actions/getListings";
export default async function Home({ searchParams }) {
const currentUser = await getCurrentUser();
const listing = await getListings(searchParams);
if (listing.length == 0) {
return (
<div>
<EmptyState
title={"No extact matches"}
subtitle={"Try changing or removing some of your features"}
showReset={true}
/>
</div>
);
}
return (
<main>
<div className="px-8 py-2 flex flex-col space-y-4 md:space-y-0 items-center md:grid md:grid-cols-4 md:gap-4">
{Object.keys(listing).map((value) => (
<Rooms
currentUser={JSON.parse(JSON.stringify(currentUser))}
id={listing[value]._id}
key={value}
image={listing[value].image}
link={
region={listing[value].region}
country={listing[value].country}
price={listing[value].price}
category={listing[value].category}
/>
))}
</div>
</main>
);
}
Here is the code of "/" page :
import Rooms from "@/components/Rooms";
import EmptyState from "@/components/categories/EmptyState";
import getCurrentUser from "./actions/getCurrentUser";
import getListings from "./actions/getListings";
export default async function Home({ searchParams }) {
const currentUser = await getCurrentUser();
const listing = await getListings(searchParams);
if (listing.length == 0) {
return (
<div>
<EmptyState
title={"No extact matches"}
subtitle={"Try changing or removing some of your features"}
showReset={true}
/>
</div>
);
}
return (
<main>
<div className="px-8 py-2 flex flex-col space-y-4 md:space-y-0 items-center md:grid md:grid-cols-4 md:gap-4">
{Object.keys(listing).map((value) => (
<Rooms
currentUser={JSON.parse(JSON.stringify(currentUser))}
id={listing[value]._id}
key={value}
image={listing[value].image}
link={
/rooms/${listing[value]._id}}region={listing[value].region}
country={listing[value].country}
price={listing[value].price}
category={listing[value].category}
/>
))}
</div>
</main>
);
}
Answered by Rough harvester ant
import connectDB from "@/middleware/mongoose";
import roomDetails from "@/models/roomDetails";
export default async function getListings(params) {
await connectDB();
if (Object.keys(params).length === 0) {
const data = await roomDetails.find();
return data;
} else {
let query = {};
const { location, category, startDate, endDate } = params;
if (location) {
query.country = location;
}
if (category) {
query.category = category;
}
if (query) {
const data = await roomDetails.find(query);
return data;
}
}
}
Instead of making an API call in /action/getListings, I made the above changes in my code and now there is no error during the next build. But why can't make any API call in my main page '/'?
import roomDetails from "@/models/roomDetails";
export default async function getListings(params) {
await connectDB();
if (Object.keys(params).length === 0) {
const data = await roomDetails.find();
return data;
} else {
let query = {};
const { location, category, startDate, endDate } = params;
if (location) {
query.country = location;
}
if (category) {
query.category = category;
}
if (query) {
const data = await roomDetails.find(query);
return data;
}
}
}
Instead of making an API call in /action/getListings, I made the above changes in my code and now there is no error during the next build. But why can't make any API call in my main page '/'?
8 Replies
That's not necessarily an issue with your code. It's telling you that it failed to build the page because the data fetching wasn't successful. The connection between Vercel's servers and whatever data provider you're using got refused.
Rough harvester antOP
Hey there! So, currently, I haven't deployed my app, but I did check it by using the build command on my PC beforehand. I was wondering, is there any solution you could suggest to help me out? Because my app is running fine on localhost
Rough harvester antOP
This is the code of /action/getListings.js :
export default async function getListings(params) {
if (Object.keys(params).length === 0) {
const response = await fetch("http://localhost:3000/api/getListings");
const data = await response.json();
return data;
} else {
let query = {};
const { location, category, startDate, endDate } = params;
if (location) {
query.country = location;
}
if (category) {
query.category = category;
}
if (query) {
const res = await fetch("http://localhost:3000/api/getListings", {
method: "POST",
"Content-Type": "application/json",
body: JSON.stringify({ query }),
});
const response = await res.json();
return response;
}
}
}
This is the code of /api/getListings/route.js :
import { NextResponse } from "next/server";
import roomDetails from "@/models/roomDetails";
import connectDB from "@/middleware/mongoose";
export async function GET() {
await connectDB();
const data = await roomDetails.find();
return NextResponse.json(data);
}
export async function POST(req) {
await connectDB();
const { query } = await req.json();
if (query) {
const data = await roomDetails.find(query);
return NextResponse.json(data);
}
}
export default async function getListings(params) {
if (Object.keys(params).length === 0) {
const response = await fetch("http://localhost:3000/api/getListings");
const data = await response.json();
return data;
} else {
let query = {};
const { location, category, startDate, endDate } = params;
if (location) {
query.country = location;
}
if (category) {
query.category = category;
}
if (query) {
const res = await fetch("http://localhost:3000/api/getListings", {
method: "POST",
"Content-Type": "application/json",
body: JSON.stringify({ query }),
});
const response = await res.json();
return response;
}
}
}
This is the code of /api/getListings/route.js :
import { NextResponse } from "next/server";
import roomDetails from "@/models/roomDetails";
import connectDB from "@/middleware/mongoose";
export async function GET() {
await connectDB();
const data = await roomDetails.find();
return NextResponse.json(data);
}
export async function POST(req) {
await connectDB();
const { query } = await req.json();
if (query) {
const data = await roomDetails.find(query);
return NextResponse.json(data);
}
}
Asian paper wasp
Did you make sure those APIs are actually callable? E.g. using postman?
Rough harvester antOP
Yes I checked using postman
Rough harvester antOP
import connectDB from "@/middleware/mongoose";
import roomDetails from "@/models/roomDetails";
export default async function getListings(params) {
await connectDB();
if (Object.keys(params).length === 0) {
const data = await roomDetails.find();
return data;
} else {
let query = {};
const { location, category, startDate, endDate } = params;
if (location) {
query.country = location;
}
if (category) {
query.category = category;
}
if (query) {
const data = await roomDetails.find(query);
return data;
}
}
}
Instead of making an API call in /action/getListings, I made the above changes in my code and now there is no error during the next build. But why can't make any API call in my main page '/'?
import roomDetails from "@/models/roomDetails";
export default async function getListings(params) {
await connectDB();
if (Object.keys(params).length === 0) {
const data = await roomDetails.find();
return data;
} else {
let query = {};
const { location, category, startDate, endDate } = params;
if (location) {
query.country = location;
}
if (category) {
query.category = category;
}
if (query) {
const data = await roomDetails.find(query);
return data;
}
}
}
Instead of making an API call in /action/getListings, I made the above changes in my code and now there is no error during the next build. But why can't make any API call in my main page '/'?
Answer