I am trying to use unstable_cache on a server component to cache data in order to improve performance. However, it doesn't seem working. Below is my code. The fetchProductWithCache is called from react component render function every time when a…
I'm using Material-UI (MUI) v6 to create a dialog that opens when a user clicks a button. I'm facing accessibility warning that only occurs on closing the dialog for the first time after render/mount. The warning doesn't appear on subsequent…
I want to show a toast when my client side component mounts. I'm using sonner library to show toast, it's working fine when we use button to show toast. I make an example app to show the problem. Here is…
I am currently working on a trail mapping Next.js react app where I fetch data from OpenStreetMap and illustrate trails on a map using leaflet polyline. Some trails have the tag oneway= 'yes' which I would like to represent visually…
I am working on a Next.Js-TypeScript project. Everything was fine. Suddenly I get a VS Code warning that I have to write import React from “react” in the .tsx files where I have used Fragment (<></>) of React. But everything…
I'm working with Next.js and have the following routes: /@modal/(.)snippets/[id]/page.tsx (for a modal) /snippets/[id]/page.tsx (for individual snippets) /snippets/new/page.tsx (for creating a new snippet) The problem occurs when I navigate to /snippets/new — instead of opening the new snippet creation page,…
I have a Next.js 14 project where I prioritize the use of server components over client components whenever possible. The layout is server-rendered, while component wrappers used within it are client-rendered. One of these components is instantiated multiple times on…
I'm working in a project that's in Nextjs 14 with Material UI 5 components for styling. I want to know if there's a ESLint custom rule to restrict the way of importing the components, probably with no-restricted-imports. // This should…
I'm writing a React component for a navbar of a personal site. I am using a list called navItems to track the name, color, and link for each navbar item: const navItems = [ { name: "home", color: "sky-700", link:…
I have created a NextJs app router to achieve the routes as follows: /chat/conversation_id -> /chat/new or /chat = Open in full main layout /chat/conversation_id/history -> /chat/new/history or /chat/id/history = Open in the - side drawer along with chat /chat/conversation_id/files…