Currently, I am in the process of learning Next.js and implementing SCSS for styling. While reviewing my work, I noticed that the styles are functioning well as shown in image 2 but encounter issues when using the `.active` class. https://i.stack.imgur.com/sghVh.png https://i.stack.imgur.com/zgReY.png
Everything is functioning properly, just remember to utilize : instead of .
&:active {
background-color: yellow;
}
Having some difficulty with the "npx create-next-app@latest" command while setting up Next.js. As a newcomer to both the community and Next.js, I could use some assistance in resolving this problem. Upon running the command, an unfamiliar message was displ ...
I have recently encountered an unexpected issue with my full-width video header that worked perfectly on multiple pages before. Strangely, a thin black line has appeared around the bottom and right side of the div (.header) containing the video, even thoug ...
On the homepage (index.js) of a Next.js website, there is an AppBar material UI component with props position="fixed". For all other pages, I would like to change the props to position="static". Rather than creating two separate compo ...
Looking to create a persistent floating window in a NextJS 14 app. This window needs to remain on top, even when navigating between browser windows. Want it to stay visible even when the browser window is minimized, like a Picture-In-Picture feature. Mos ...
Experiencing an unusual issue with my Footer component. The useEffect function seems to be triggering a re-render of the entire page and component every 4 seconds, instead of just updating the specific element. I'm not sure where I've gone wrong. ...
I am currently working on implementing a protected route in Next JS. I have included a useEffect to redirect to the sign-in page if there is no user detected. const analytics = () => { const { userLoaded, user, signOut, session, userDetails, subscri ...
Whenever I run npm run dev in my terminal to start a nextJS project, it shows the following output: > [email protected] dev > next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 but when I try to access it in the browser, ...
I've been experimenting with using a web worker to detect poses frame by frame, and then displaying the results on the main thread. However, I'm encountering some delays and synchronization issues. My setup involves Next.js 14.0.4 with @mediapip ...
Following instructions from the documentation, I have set up a base query for sending headers, specifically for authentication purposes. const baseQuery = fetchBaseQuery({ baseUrl: '/', prepareHeaders: (headers, { getState }) => { cons ...
Having trouble building my NextJS 13 app with a type error, even though it works fine in the development environment The error is occurring in this specific file import NextAuth, { AuthOptions } from "next-auth"; import GoogleProvider from " ...
Having trouble accessing state's values using [...state_name,{}]. I'm facing an issue while trying to implement this algorithm for a dynamic menu. The data is fetched from the List action of the useFetch method. The data retrieval is successful ...
Struggling to pass the handleSubmit function from React Hook Form to the action attribute. Even though I can execute the action function without using handleSubmit, I lose out on the validation and other functionalities provided by React Hook Form in that ...
I am currently working on a Next.js application that includes a basic form with a file input field. My goal is to attach this file in SendGrid and send it via email. File Input Form: <div> <form onSubmit={handleFileUpload}> <div&g ...
When an image is resized using a percentage, it preserves its aspect ratio properly. I am looking for a way to replicate this behavior with a div. My current challenge involves precisely positioning an element relative to an image. The image fills 100% of ...
In my Next.js app, I am utilizing custom server options and AWS CodePipeline for CI/CD. The pipeline includes CodeBuild to build the app and AWS CodeDeploy to deploy it to all instances in an autoscaling group. This deployment is configured with CodeDeploy ...
Exploring the latest features of Next.js 13 with the /app directory, I encountered an issue while using the FileReader in a basic client-side component that manages an input form. Here is a brief overview of the code: "use client"; import React, ...
I have explored different solutions for adding multiple plugins to the next.js config file, with composition being the suggested method. However, I am encountering issues with this approach. const Dotenv = require('dotenv-webpack'); const withSt ...
Trying to test a contact form in Next.js where the data is logged but not sent to the API due to an error. "POST http://localhost:3000/app/(pages)/api/contact/route.tsx 404 (Not Found)" Troubleshooting to identify the issue. [directory setup] ...
I'm currently developing a next.js project using Contentful as the Content Management System. My goal is to display a 404 page for a server-side rendered dynamic route after a client-side page transition. When I directly request the page (by entering ...
I've been trying to use document.getelementbyID().reset(); to reset form values, but I keep running into an error in TypeScript. Property 'reset' does not exist on type 'HTMLElement'. Here's how I implemented it: const resetB ...