I have this component in Next.js (v14.2.1) which, essentially, all it does is to pick a random string while i fetch some data. However, i've been trying to persist the same string on server and client side without any luck.…
As you can see in the code snippet below, I have tried all 6 of Tailwind's justify and align content, items, and self properties as well as flex justify-between on the parent and still not managing to get the desired…
I am using version 14 of Next.js, and I want to write code for a scenario where when a user clicks the start button, it goes into full screen. Now, when the user presses Escape for the first time, they…
My route is below: export async function GET() { await connectMongoDB(); const allCargoDetails = await CargoDetails.find(); return NextResponse.json({ allCargoDetails }); } export async function DELETE(request) { const id = request.nextUrl.searchParams.get("id"); await connectMongoDB(); await CargoDetails.findByIdAndDelete(id); return NextResponse.json({ message: "Detaily smazány" });…
My goal is to create a website with Next.js and to create a mobile app with React Native. But, I need all the following benefits: I need All SSR benefits and features on the web app like server components, etc…
I have a client component in next js which uses useeffect to call an api, however its is calling twice at page load the api, i dont know why. here is the client component: 'use client'; import { useState, useEffect…
I am trying to get used to Next.js' version. Before I was using getServerSideProps and sending the data to client side so I was getting the data at first render without seeing undefined. I didn't understand how to achieve the…
I have a nextjs project which to test locally i need to run on on https, i have seen there is a --experimental-https command but when i run it i am getting Unknown or unexpected option: --experimental-https my project is…
<div className="bg-[#F8F8F8] flex items-center justify-center px-2 py-10"> <Image src={image} alt="course image" width={100} height={100} /> </div> I want when image is not available due to error so replace it with dummy image how can i do that?
This is how I handle fetch now following the next’s document. https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch async function getSuite(propertyId: string, suiteId: string) { const cookieStore = cookies(); const accessToken = cookieStore.get("accessToken"); const res = await fetch( `${process.env.NEXT_PUBLIC_API_BASE_URL}/suite`, { headers: { "X-Authorization": "Bearer " +…