nextjs page is showing 404 in server but works in localhost - api

Question

This is a React component in Next.js that implements a search functionality. It uses the useRouter hook from the next/router library to retrieve the search query from the URL and store it in the search variable. Then, the component uses the useState hook to store the search results in the searchData state.
The component calls an async function torHeda in the useEffect hook, which sends a POST request to the endpoint domain + 'api/vb1/search-post' with the search query in the request body. The response is stored in resData , and the searchData state is updated with resData["data"].
The component returns a grid of cards with information about the search results, each card is rendered using the Cards component, and the title, category_name_bn, created_at, image, id, and status of each search result is passed as props to the Cards component. If the searchData array is empty, it will return a message indicating that no results were found. It works in localhost perfectly fine but after deploy to server it shows 404 This page could not be found.
Here is full page code:
import Link from 'next/link';
import {useRouter} from 'next/router';
// import { useRouter } from 'next/router';
import {useState, useEffect} from "react"
import Cards from '../components/GridCards';
import domain from '../cred';
function SearchDetails() {
const router = useRouter();
const search = router.query.search
const [searchData, setSearchData] = useState()
useEffect(()=>{
async function torHeda (){
const data = {
search: search
}
const JSONdata = JSON.stringify(data)
const endpoint = domain + 'api/vb1/search-post'
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSONdata,
}
const response = await fetch(endpoint, options)
const resData = await response.json();
const searchData= resData["data"]
setSearchData(searchData)
}
torHeda()
},[]);
return (
<>
<div className='grid grid-cols-4 mb-4 gap-10 mx-48 my-12 w-full'>
{searchData?.map(pageItem=>{
{console.log(searchData)}
if (searchData !== null) {
return <Cards key={pageItem?.id} title={pageItem?.title_bn} catagory={pageItem?.category_name_bn} time={pageItem?.created_at} imgSrc={pageItem?.image} status={pageItem?.status}/>;
}
})}
</div>
{(()=>{
if(searchData?.length === 0){
return <div key={1} className="h-[10rem] flex justify-start items-center mx-48 md:mx-10"> <h1 key={1} className='text-black text-3xl w-full dark:text-white md:text-base'>দুঃখিত আপনি যা খুঁজছেন তা খুঁজে পাওয়া যায়নি! পুনরায় অনুসন্ধান করুণ।</h1> </div>
}
})()}</>
);
}
export default SearchDetails;

Answer 1

After deleting this page I build the website using command npm run build. After a while I reuploaded the this file and again I rebuild the website.. I tried rebuild many times before but deleing file method worked for me .