Questions tagged [next.js]
Next.js stands as a sleek and streamlined framework, dedicated to crafting server-rendered React applications alongside the ability to export React apps in static format.
When attempting to establish a connection using mongoose, I consistently encounter the errors outlined below. However, if I use MongoClient instead, everything functions as expected. import connectMongo from '../../lib/connectMongo' console.log("TRY ...
Currently, I am working on a Next.js application and I need to customize Babel in order to run my Jest test suite. The issue I'm facing is that when I configure the babel.config.js file, Jest runs successfully but Next.js also picks up this configurat ...
I recently transitioned my project from React to Next.js and encountered an issue where my environment variables are showing as undefined, even though they were functioning correctly in React. Can someone provide some guidance or assistance with this probl ...
I encountered an issue where I am unable to retrieve the image from the API. Strangely, it works fine with the img tag but throws an error when switching to the NextJS Image tag. import React, { useState, useEffect } from "react"; import ...
I encountered an issue while attempting to build my next.js project. How can I resolve it? It seems that the error is related to using hooks conditionally. ./src/lib/session.js 6:29 Error: React Hook "React.useState" is called conditionally. R ...
Whenever I pass a JSON array from getStaticProps in Next.js, I encounter this specific error message when trying to access it. TypeError: Cannot read property 'contentBody' of undefined module.exports../pages/[author]/[article].js.__webpack_exports__.defa ...
What is the process for implementing a custom loader in Next.js instead of using the default option? const loading = true; if (loading) { return <CustomLoading />} ...
I have been working on exporting a custom function called setLanguageHeader in order to modify the Accept-Language header used by axios. In my axios file, I encapsulated the code as follows: requests.ts: import axios, { AxiosRequestConfig } from 'ax ...
"use client"; import { useLocale } from "next-intl"; import { locales, localeNames } from "../../i18nconfig"; import { useRouter } from "next/router"; import Link from 'next/link'; import { Fragment } from ...
Currently, I am in the process of creating an intranet webpage that will be hosted on a private network using Next.js. However, when the production-level Next.js web app is built and running, it forces the loading of files (CSS, JS, images) via the HTTPS ...
How do I initialize a socket in the app/api/socket/route.js directory? When referencing the example in the pages/api/socket.js directory, it seems that it does not return an instance of http.ServerResponse. Instead, it returns NextResponse, which does not ...
When working with getStaticProps and getServerSideProps in Next.js, I need to intercept and add common header properties to all request calls that are executed server-side. axios.interceptors.request.use(function (config) { // Perform actions before ...
I'm currently trying to extract the ID that is selected (#about, #home, #blog) or the full path (http://localhost:3000/#about, http://localhost:3000/#home) from the router. I am working with Next.js version 14.0.3 This is my approach: My current URL ...
I'm facing an issue where Axios is not sending the cookie to my backend API, even though I have set the withCredentials properly. Front-end (NextJS): import axios from "axios" const BASE_URL = "http://localhost:8000" export defa ...
I'm currently tackling a project in Next.js with Tailwind CSS enabled. Below is the code snippet from my page.tsx: export default function Page() { return ( <div className="flex flex-row flex-wrap items-center justify-center space-x-16 s ...
As I work on developing an application using Next.js serverless, I am facing an issue where instead of generating JS files in the designated folder (next/serverless/pages/), my pages are being transformed into static HTML files. This is evident during the ...
Encountering an error when attempting to boot immediately after using create-next-app. Opted for typescript with eslint, but still facing issues. Attempted without typescript, updated create-next-app, and reinstalled dependencies - unfortunately, the prob ...
Currently, I am working on a React application using Next.js and trying to incorporate a graph feature using recharts from . Below is the code snippet I have implemented: /index.js const formatDate = (value) => { return moment.unix(value).format('HH: ...
I've been trying to display a button on top of an image using Tailwind CSS and Next.js, but I'm having trouble getting it to align properly. Here is the code snippet I've been working with: <div> <Image src={projectAiWriter} alt=&q ...
Upon clicking on the map, I successfully retrieve the latitude and longitude coordinates which I then log in the console. However, when attempting to assign them to a state variable, I encounter the following error: https://i.stack.imgur.com/dwDaw.png I a ...
Exploring the realm of Docker as a newbie, I am immersing myself in its official documentation. My current venture involves fashioning a NextJS build with a docker image tailored for an nginx server, and here is my roadmap: Commencing by installing the es ...
Is there a way in Next.js to create individual pages for each object in an array with unique URLs? Here is the input array: Input Array const products = [ { url: "item-1", id: 1, name: "Item 1", description: "lor ...
To display a component when the input is focused, follow the steps below: Click here for not focused state When you click on the text input, the component should appear like this: Click here for focused state The code snippet provided works correctly. ...
I keep encountering the error message "Cannot destructure property 'currentUser' of 'Object(...)(...)' as it is null" whenever I utilize the useContext() hook from React in my Next.js project. // Other imports import CurrentUserContext ...
I am currently utilizing the shadcn dialog component, and I made some adjustments to its default behavior. Initially, the submit button was functional even without any input in the fields, which was not my intended functionality. Now, the submit button no ...
Hey there, I'm currently working on setting up a login system with next-auth in Next.js 13 using appDir: true. The version of Next.js I am using is 13.3.0, but after going through the documentation, I must admit that I'm struggling to fully grasp it. My im ...
Having an issue with a web app built using ReactJs and NextJs. I implemented the react-select component in a functional component, but now I'm getting this warning in the console: Warning: Prop id did not match. Server: "react-select-7 ...
In my NextJs project, I've implemented a component that utilizes the useDebounceHook for handling search functionality. This is how the component is structured: import { useRouter } from 'next/router'; function SearchComponent() { const r ...
My current setup consists of a React frontend running on localhost:3001 and a Next.js backend running on localhost:3000. I have a REST endpoint at /api/employee, and I'm attempting to fetch data from my frontend using the following code: fetch(process ...
Attempting to create my inaugural website that showcases data from an API sans a tutorial. Does it seem like I may have overlooked something? I've successfully fetched the API and confirmed in the console log that the necessary data is present. However, u ...
Recently, I delved into the world of Next.js in my quest to create an SEO friendly website using React. Everything was going smoothly until a roadblock appeared. The issue pertains to deploying a Next.js app into a directory that is not the root directory ...
I'm currently using React and Next.js in conjunction with Firestore. As I fetch data from Firebase on one page using useEffect once the page is rendered, I've noticed that the read operation can be resource-intensive. To avoid unnecessary fetchin ...
I have a Next.js app and a globals file containing all the themes: body { margin: 0; font-family: Inconsolata, monospace; background-color: var(--bg-color); } :root { --bg-color: #262a33; --main-color: #43ffaf; --sub-color: #526777; --sub-al ...
I am working on developing a new blog app with Next.js. In the current layout of the blog, I have successfully fetched data for my sidebar (to display "recent posts") using the useEffect/fetch method, as getInitialProps only works on Pages. However, this ...
Within my NextJS Application, I have a dedicated APIService.js file that serves various purposes, with the primary function being to set the BASE_URL and handle user authentication (checking for a token in either cookies or headers and dispatching it into ...
NextJS 11 brings the exciting feature of using the Image component with a blur placeholder. To utilize this with dynamic images, we need to make use of the blurDataURL, which is a Data URL. I am interested in taking my original image and resizing it to a ...
I've encountered a frustrating issue with NextJS and I'm not exactly sure why. The problem arises when I attempt to create a new route under /pages/. After duplicating a functioning page and renaming the function to Test, with test.js as the fil ...
Instead of creating another table named friends in Strapi and linking it to Visual Studio Code, I have opted to use a Characters table for both team members and friends. This way, I can input new data only at Characters and filter it to differentiate betwe ...
I have integrated a Modal component into my Next.JS application, and I have implemented a functionality to close the modal when the user scrolls outside of it. However, this effect is also triggering when the user scrolls inside the modal. How can I modi ...
Looking to create a webpage featuring an extensive checklist of 100 items that can be retrieved from and updated in a Firestore document. Here is my current strategy: // Here, we define states that store the checkbox values const [checkA, setCheckA] = u ...
Hey there, I'm currently working on a reactjs app and everything is running smoothly with the routes except for the register user function which is throwing an error: Error: useHref() may be used only in the context of a component. I am utilizing firebase ...
I’m currently working on integrating GraphQL into Next.js API routes. For writing the GraphQL schema, I’m utilizing Nexus. Here are the two essential files: context.ts and schema.ts, that help in setting up Nexus development mode. // context.ts import ...
Currently, I am utilizing fetch along with NextJS to attempt to send information such as name, phone number, email, company, and message to an API. However, I am encountering an issue where the error message simply states 'Failed to fetch' in the ...
I'm still getting the hang of tRPC, so I appreciate your patience with me. I've run into a problem with the useMutation query. Every time I use useMutation with new input, it seems to give back undefined for data. Interestingly, though, I can con ...
I need to retrieve data from a spreadsheet using the Sheet API. After setting up a project in Google Cloud Platform and creating a service account, I granted the account permission to edit the spreadsheet. I then downloaded the credentials in JSON format. ...
I am in the process of transitioning my app from SPA React to Next.js. One peculiar bug I have encountered is that in the SPA, I have max-width: 100%, while in Next.js it's set as width: fit-content. I'm unable to pinpoint the root cause of this varying ...
I'm currently working on integrating redux-persist with next.js using next-redux-wrapper. However, I'm facing an issue where the storage is not updating and the state is lost during page refresh. Below is my store.ts file: import { createStore, applyMiddl ...
I recently came across a code snippet that effectively resolved my re-rendering issue in Next JS when switching pages. However, I am now faced with the challenge of sending props to the children component. In my layout.js file, I have managed to send props ...
I'm encountering an issue while fetching data from the API and trying to map it to display in a table. The problem is that the fetching process doesn't seem to be working properly, resulting in the state remaining undefined when the page loads. I ...
Development Setup ・ next.js ・ typescript ・ swr This uses swr for communication purposes. I am looking to only trigger it when the query value changes. However, it is also being executed during the initial rendering. How can I prevent it ...
After trying multiple methods to dynamically display icons, I finally found one that works in my case: <div style={{display: "flex", flexDirection: "row"}}> {logo?.map((logos, index )=> {return ( <React.Fragment key={ind ...
When I am logged in, I want to redirect to the /chat page using auth0 for authentication. The error seems to be related to returning an empty string for props, but it does not impact the website as redirection works correctly. The main issue here is the in ...
I am currently working on a basic NextJs TypeScript application with the app router. The following code is functioning correctly: export default async function Page() { const res = await fetch("https://api.github.com/repos/vercel/next.js"); ...
My images are stored in the public directory and all of my code is located in the src folder. Usually, when I try to import an image from src/page/page.js like: /image/logo/logo-dark.png, it works. But when I am importing images from the src/component/cor ...
After updating to nextjs v13, I have successfully moved my personal page to the app directory. I experimented with adding loaders for RSCs by first using the fallback prop of the Suspense component and also including a loading component within each route ...
UPDATE: Removing this section from _document did solve the issue, but why? <Link href={`/search`} prefetch={false}> <a className="d-inline-block text-center" style={{ textDecoration ...
I am currently hosting my application using next.js on Vercel. I want to integrate Pusher to provide real-time messages to users in a private and secure manner. Despite successful log entries, I am facing challenges in subscribing to the channel and retrie ...
The issue at hand: When attempting shallow routing in Next.js by changing the query string (adding or removing, but not updating), the page is reloaded and the shallow option is ignored. Is there a way to prevent reloading while modifying the query strin ...
I have been working on implementing detection in a web application using a custom yolov4 darknet model. The model was initially converted to TensorFlow by following the steps outlined here: https://github.com/hunglc007/tensorflow-yolov4-tflite Subsequentl ...
Currently seeking a solution to create a dynamic route that will display each document in a Firestore collection using Server-side Rendering. For instance, if there is a document named foo, it would be accessible at test.com/foo under the [doc] page compo ...
Currently, I am building a helpdesk system for a school project using Next JS and Supabase. However, I have encountered an issue with the real-time chat functionality between the operator and the client. My approach involves subscribing to a table in the ...
Check out the repository here. This is essentially the example provided by Material-UI with an additional input component in pages/index.tsx After running npm run build and npm run start on both my local machine and VPS, the outlined input component disp ...
I am having trouble accessing an endpoint in next.js from a headless CMS proxy in Node.js, and I can't seem to make it work properly. Instead of redirecting me to the desired site, I am encountering the following error: If you need assistance, refer to: ...
I've been following the tutorial for creating a Shopify app. However, when I try to run npm run dev, I encounter the following error. started server on http://localhost:3000 TypeError: Cannot read property 'access' of undefined at fileExist ...
I've been attempting to create a basic counter component that increments the count of a state variable when a button is clicked. To achieve this, I created a separate file named Counter.tsx and placed it in the components folder at the root of my next proj ...
Why is tailwind not displaying correctly in my next.js project? I'm concerned that there might be a problem with my settings. In the styles folder, I have a file called tailwind.css @tailwind base; /* Write your own custom base styles here */ /* Start ...
Recently, I've been delving into the world of AWS and attempting to deploy my simple React app on the AWS Amplify front-end server. Despite successfully building my app, I was met with an 'Access Denied' error on the page. <Error> <Code>Acce ...
I encountered an issue while trying to integrate Pusher into my Next.js application due to Vercel's restriction on websockets in their serverless functions. The error message I keep receiving after running the program with Pusher is: error - unhandled ...
Previously, with the legacy pages router, I was able to use await on router.push. This allowed me to keep a button disabled while waiting for navigation to another page: async function onSubmit(input: CreatePostFormData) { try { awai ...
I'm currently working on an Express API route that looks like this: const router = require("express").Router(); router.get("/:jobId/:format", async (req, res) => { try { const { jobId, format } = req.params; if (form ...
Express Code: app.get('/', async (req, res) => { const devices = await gsmarena.catalog.getBrand("apple-phones-48"); const name = devices.map((device) => device.name); res.json(name); }) Nextjs Code: import {gsmarena} ...
Currently, I am integrating FontAwesome into my NextJS project with Tailwind CSS. Following the official documentation, it instructs to add the given code snippet to _app.tsx file: import { config } from "@fortawesome/fontawesome-svg-core"; impor ...
In my Prismic RichText editor, I have included two files (terms and conditions) that I would like to open in a new tab. Unfortunately, Prismic does not offer an option like target _blank for this functionality. I am currently working with NextJs and Tail ...
I'm currently experiencing a problem where Ionic styles are not being applied to certain pages in my Next.js app. Despite working on the home page, the Ionic styles do not seem to be taking effect on the profile page. Any guidance on troubleshooting t ...
Currently, my web app is being developed using NextJS NodeJS and Express. I have set up two servers running on localhost: one on port 3000 for Next and the other on port 9000 for Express. In the app, there is a form with two input fields where users can e ...