automated refreshing in Next.js

Is anyone else experiencing issues with auto refresh not working in my Next.js app? Every time I make a change to the code, I have to shut down and restart the app to see the updates. Does anyone know of any solutions for this issue? ...

Trouble with Next Js Image 'fill' property causing images to not show up on the page

Currently tackling a project involving a simple grid layout with images and text. I'm using Next 13.4.7 along with Tailwind CSS. However, I've encountered an issue when trying to import an image using the Next Image component with the fill prop - ...

Sorting through items based on several URL parameters

In an effort to be concise yet clear, I am working on an ecommerce website using Next.js and Shopify. This site features products that need to be filterable based on certain attributes. I retrieve products from the Shopify API, each with its own Product Ty ...

The error message "TypeError: (0 , _reduxjs_toolkit__WEBPACK_IMPORTED_MODULE_0__.createAsyncThunk) is not a function" indicates that

I encountered this unexpected error while attempting to deploy my client to Vercel. Utilizing NextJS, I am fetching data server-side with getStaticProps. Despite reinstalling the toolkit, the issue persists. import { createSlice, createAsyncThunk } from ...

When you use the useState object in NextJS, the context object may appear to be empty

I've encountered an issue while trying to pass a context object in NextJS that uses data from a useState hook. Strangely, the state variable and setState functions are undefined when consumed. It's puzzling because substituting a simple variable ...

Encountering the error message "Required property 'src' is missing in image" while using Next.js image functionality

Oh no! There seems to be an issue: The image is missing the required "src" property. Make sure you include the "src" in the props when using the next/image component. Received: {"width":48,"height":48} I'm having trouble underst ...

Guide to handling disabled dates in the react-date-range component

I am seeking guidance on how to handle disabled dates that are not included in the availableDates state. This feature is crucial for booking travel. 'use client'; import axios from 'axios'; import { useEffect, useState } from 'rea ...

Encountering a 404 error when trying to navigate to the next route using the Link component

Having issues with my login route. I've added a Link to the login route inside a button tag in my Navbar component, but when I try to access the route, I'm getting a 404 error page. --app ----pages ------component --------Navbar.js ----- ...

Building a Search Bar with React utilizing NextJS framework

Seeking assistance in pinpointing the issue with my code. This application is an Employee Search tool utilizing the new APP directory with NextJS. Functioning features: Includes an input field for filtering and capturing user input. The API endpoint retu ...

Tips for creating successful tests for a project that includes i18n functionality

I have been working on a Next.js project for some time now. The project includes i18n support, and I'm keen to write unit tests for it. However, I've hit a roadblock in figuring out the most effective way to approach writing these tests. Should I ...

Updating a route in Next.js? Make sure to remove the classList as you

Looking to remove a specific class whenever the route changes in Next.js, I've attempted the following approach: React.useEffect(() => { const activatedLink = router.query.tags const classActivated = document.querySelector('.'+activated ...

Navigating Axios Interceptor within the NextJS 13 app folder

Is there a solution for utilizing axios interceptors with NextJS 13? It seems like it should be simple, but I'm struggling to make it work. Here's a basic client component: "use client" import React, {useState} from 'react' i ...

Prevent Dropdown from Triggering Unexpected Jumps

I've incorporated the TextField and MenuItem components from Material-UI into my next.js project. By setting the "select" prop in the TextField, it utilizes the Select component internally. However, I'm facing an issue where the dropdown jumps ...

Error: Client encountered an issue where the data input on field number 9, CommentCreateInput.n, does not match the required type String! Also, on field number 10, the input for "name" is

Currently, I am working on a blog website using React, Next.js, GraphCMS, and TailwindCSS. One particular issue I am encountering is related to the API responsible for transmitting comments from the website to the CMS. Below is the code snippet for my com ...

Encountering unhandled promise rejection error with email field in NextJS when using React Hook Form

I am encountering a bizarre issue where, on my form with two fields (name and email), whenever the email field is focused and onSubmit is called, I receive the following error message: content.js:1 Uncaught (in promise) Error: Something went wrong. Please ...

Guidelines for communicating error messages to the frontend using Next.js Server Actions in conjunction with React hook form

I have a server action function that looks like this: export const sendResetEmail = async (values: FieldValues) => { const user = await prismadb.user.findUnique({ where: { email: values?.email, }, }); if (!user) { throw new Erro ...

Resolve problems with implementing dynamic routes in Next.js

I have been learning about Next.js and I am struggling with understanding how to set up dynamic routing. I have the following setup: https://i.stack.imgur.com/uBPdm.png https://i.stack.imgur.com/YYSxn.png "use client" import React from "reac ...

Experiencing issues with the functionality of getServerSideProps in my project

I'm scratching my head over why server-side props aren't working for me in nextjs (v12). I'm utilizing getServerSideProps inside pages/details/index.tsx. export const getServerSideProps = async (context: any) => { const name = context.q ...

Exploring the world of form state management using react-hook-form and zod within the shadcn/ui ecosystem

Presently, I am immersed in a project where I am utilizing shadcn/ui. Within the shadcn.ui form setup, they have integrated react-hook-form for managing the forms and zod for validation. My Inquiry Within React Hook Form, the state of an input field is co ...

Having trouble getting tailwind dark mode to work on next.js?

I have set up a custom boilerplate using next.js(10.0.5) with preact(10.5.12), typescript(4.1.3), and tailwind(2.0.2). I am attempting to incorporate a dark mode feature from Tailwind. I followed the instructions from next-themes in order to add the dark ...