I am using newest version of Next.js , and inside the route /userprofile/[username] i have a page.jsx that works on server side (non client component), everything is gucci when i make a request to the backend, which is in express.js
however, once i make a small change in express.js somehow next.js stop sending the request to express, and I have to delete .next folder and re-run the application on frontend in order for next.js to send a request to the backend and render the component.
express.js userModel
file has this code:
const User = {}
User.get = async function ({username}){
console.log('print something')
try{
const fetchData = await pool.query('SELECT firstname, lastname, _username, bio, profilelogo FROM _user WHERE _username = $1',[username])
console.log(fetchData)
console.log('print something again')
print('again and again')
return {success:true, data:fetchData.rows[0],message:'User data has been fetched successfully'}
}
catch(e){
console.log(e)
return {success:false, data:null, message: e.message}
}
}
express.js UserController
file:
const UserController = {}
UserController.get = async function (req,res){
console.log('try')
try{
const userInfo = await User.get(req.params)
console.log(req.params)
if(userInfo.success){
return res.status(200).json({data:userInfo.data})
}
return res.status(401).json({message:userInfo.message})
}
catch(err){
console.log(err)
return res.status(500).json({error:err.message})
}
}
module.exports = UserController
express routing:
router.get('/userprofile/:username', UserController.get)
next.js /userprofile/[username]
server component inside page.tsx
import Image from "next/image"
interface UserInfo{
_username:string,
firstname:string,
lastname:string,
bio:string,
profilelogo:string
}
export default async function UserProfile({params}:{params:{username:string}}){
const data = await fetch(`http://127.0.0.1:3000/userprofile/${params.username}/`,{headers:{'Content-Type':'application/json','Accept':'application/json'}})
const userInfo = await data.json()
console.log(userInfo)
return(
<div className=''>
<div className=''>
<div>
<div>
<Image src={userInfo.profilelogo} alt='profilelogo'></Image>
</div>
<div >
<div>{userInfo._username}</div>
</div>
</div>
<div>
<div className=''>
{userInfo.firstname} {userInfo.lastname}
</div>
<div>
{userInfo.bio}
</div>
</div>
</div>
</div>
)
}
how do i resolve this?
when i make a change in the backend, the userInfo
in the frontend is basically an empty
object, and nothing in the backend happen, which basically means the console.log()
that i put everywhere in the backend code is not printed anymore.