Posted By: Anonymous At the moment, I am trying to make an application with NEXT.JS. When I come to revalidate of page using method ISR. I very confused to understand how it works for the system or how is it auto to rebuild data of the pages in the system? Many thanks. Solution You can …
Posted By: Anonymous I’m building my first project with next.js, and it’s been a crazy journey so far, and it’s been great, but, i’ve noticed something about this thechnology that kinda bothers me. Not onyl in the development of my app, but in the course i did, i’ve noticed that next.js is a litle bit …
Posted By: Anonymous I am using custom server in nextjs. Everytime I make a change in the frontend or backend, nodemon restarts the main process and the child processes. This results in an increased build time. My expectation is that when I make a change in the pages or other frontend component, the already running …
Posted By: Anonymous Problem I’m using Next.JS with Typescript. I get an error when I try to return a redirect if the data doesn’t exist. Code import { GetStaticProps } from "next"; import fs from "fs/promises"; import path from "path"; function HomePage({ products }: { products: { id: string; title: string }[] }) { return …
Posted By: Anonymous Today, in my side-project, I got a problem relate to setup getStaticPaths of multi-locale dynamic pages in Next.js. I researched and find out that there are so many people stuck in this problems. I have created a dynamic page [slug].js to handle all dynamic datas I got from a database. And my …
Posted By: Anonymous So I have a form which works fine and for error messages I have created a schema file which contains errors defined like this export const dataInputCreateSchema = yupObject({ company: yup.object().required(‘This field is required’).nullable }) In my component I am initializing my i18next translation variable like this const { t } = …
Posted By: Anonymous I would like to base an input search. To be able to send the content to another page which then makes an API request with the content of the input search. Basically I would like the user to be able with the search bar, type "something" and that this "something" I get …
Posted By: Anonymous I’m having a problem with getServerSideProps in NextJS not updating values on page load. It seems to be having the same effect as using getStaticProps when calling from data that is an imported json file. Here’s the applicable code: /update/[…id].js import { hasPermission, getPermissions } from ‘../../lib/permissions’ … //in the page function …
Posted By: Anonymous Next.js lays out a pretty comprehensive way to get imagery from the /public/ folder (where the app has you store static assets). The pattern is to use fs from Node and do the fetch in getStaticProps. My attempt: export async function getStaticProps({ params, preview = false, previewData }) { const cityData = …
Posted By: Anonymous I have a Header.JS file which has a navigation component, sometimes I need the left menu to render and sometimes I need the right one to render based on the page. If my path is / I want to render <Navigation menu={menus?.left_menu} styles={styles} className={styles.leftMenu} /> if my path is anything else like …
Posted By: Anonymous i’m using next version 10.0.1, and react 17.0.2, When i’m trying build my next app, i get an error: ReferenceError: define is not defined at Object.<anonymous> (/Users/***/Desktop/gm/toesim-web/node_modules/@glonassmobile/codebase-web/createAction.js:1:1) at Module._compile (node:internal/modules/cjs/loader:1092:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10) at Module.load (node:internal/modules/cjs/loader:972:32) at Function.Module._load (node:internal/modules/cjs/loader:813:14) at Module.require (node:internal/modules/cjs/loader:996:19) at require (node:internal/modules/cjs/helpers:92:18) at Object.i1ag (/Users//Desktop/gm/toesim-web/.next/server/pages/deeplink/payment/[paymentId].js:7425:18) at __webpack_require__ (/Users/Desktop/gm/toesim-web/.next/server/pages/deeplink/payment/[paymentId].js:23:31) at …
Posted By: Anonymous I raised an issue https://github.com/facebook/jest/issues/11504 against the jest project, which I think is responsible for maintaining babel-jest. Transpilation totally fails after adding apparently harmless and error-free code. However, there are a lot of layers to the transpilation of a Typescript Next project, so I am unsure if this is the correct place …
Posted By: Anonymous I have a form with a radio button that have to do something when the item selected changes, but it only happends when the page loads but no when I select other item This is my code: <div key={item} className="lg:w-1/2"> <label className="flex items-center mx-6" htmlFor={item.option_image.alt} > <input className="w-5 h-5 mr-4" type="radio" id={item.option_image.alt} …
Posted By: Anonymous I’m using Next.js with Vercel. This is my .env.local file: # Created by Vercel CLI VERCEL="1" VERCEL_ENV="development" VERCEL_URL="" VERCEL_GIT_PROVIDER="" VERCEL_GIT_REPO_SLUG="" VERCEL_GIT_REPO_OWNER="" VERCEL_GIT_REPO_ID="" VERCEL_GIT_COMMIT_REF="" VERCEL_GIT_COMMIT_SHA="" VERCEL_GIT_COMMIT_MESSAGE="" VERCEL_GIT_COMMIT_AUTHOR_LOGIN="" VERCEL_GIT_COMMIT_AUTHOR_NAME="" I have a component that is trying to access: process.env.NEXT_PUBLIC_VERCEL_ENV to make sure it is on development environment. This is what I’m getting when running …
Posted By: Anonymous Problem My Next.js/React/Node app crashes when I import Chart from "react-apexcharts" in any file. Attempting to visit the app results in the following error: Server ErrorReferenceError: window is not definedThis error happened while generating the page. Any console logs will be displayed in the terminal window. (see call stack below). This happens …
Posted By: Anonymous I learning typescript in react but got an warning import {useref} from ‘react’ export default function test(){ cons tmp = useRef() const data = tmp.current?.value return ( <div> <input type ="text" ref={tmp}/> </div> ) } but I got warning like this Property ‘value’ does not exist on type ‘never’.ts(2339) can someone help …
Posted By: Anonymous In the process of developing an app, in the fronted, i’m facing a weird problem with the onClick function, which is the following Type ‘(e: SyntheticEvent<Element, Event>) => void’ is not assignable to type ‘CustomValueType | MotionValue<number> | MotionValue<string> | MotionValue<any> | ((event: MouseEvent<{}, MouseEvent>) => void)’. Type ‘(e: SyntheticEvent<Element, Event>) => …
Posted By: Anonymous I want to route my users to a page where they can get discounts based on their citizenship id numbers. I will use their id number to determine the amount of discount they get. I can use their id to determine Location, Age, Gender etc. They can route to mywebsite.com/megadiscount and fill …
Posted By: Anonymous Live example available here I’m trying to make a basic layout where, on mobiles, only the latest posts appear. On desktop, the left column should be the posts and the right column the top categories and most popular posts. Here is the layout: const IndexLayout: React.FC<IndexLayoutProps> = ({}) => { const cols …
Posted By: Anonymous I would like to see how I can create global contexts in NextJS and have global variables inside the app. Currently I have AppContext.js as import { createContext } from ‘react’ const AppContext = createContext(); export default AppContext _app.js const [socketio, setSocketio] = useState(null); const appContext = { socketio }; return( <AppContext.Provider …
Posted By: Anonymous I have a project that already was deployed on Vercel. Since last week Im working on improve the layout with the goal of finish a MVP of this project. So, I changed my usage of auth0, using the package to nextjs @auth0/nextjs-auth0. I ran npm install @auth0/nextjs-auth0 and I have on my …
Posted By: Anonymous I’m trying to run this code to implement a Firestore backup. But for the first time, I’m deploying it into a Next.js project. I’ll hit it on my /api/backup endpoint. const backupHandler: NextApiHandler = async (req,res) => { try { const admin = initializeFirebaseAdmin(); const PROJECT_ID = getProjectId(); const client = new …
Posted By: Anonymous I’ve built this simple project with react-query and nextjs , after running the project it gives me this error in the console, what did i do wrong ?! TypeError: Converting circular structure to JSON –> starting at object with constructor ‘QueryClient’ | property ‘queryCache’ -> object with constructor ‘QueryCache’ | property ‘queries’ …
Posted By: Anonymous From: next/link You can see that the <Link> component from next/link enables client-side transitions and link prefetching, which are great features, but maybe not for all cases. Please see the caveat I’ve run into. Let’s say I have the following pages: Home – Some landing page with a nav bar Latest – …
Posted By: Anonymous I am making a Next website, and added Snipcart. The Snipcart UI embeds Vue, and has embedded images in it, and an external CSS file, which all in all add a ridiculous amount of time to my page load time. I also don’t quite like the UI, but that’s a more minor …
Posted By: Anonymous The logic below is in: React / Nextjs with styled-components. Hello, I have a component that "renders" a blog banner (background-image), the url comes from a state that already has a standard image. const [blogBanner, setBlogBanner] = useState (‘/ images / imageBlogDefault.png’) But before the component receives this state, the code checks …
Posted By: Anonymous I use NextJS API interfaces as Server Sent Events as follows: const handler = async (req: NextApiRequest, res: NextApiResponse) => { … … res.setHeader("Content-Type", "text/event-stream;charset=utf-8"); res.setHeader("Cache-Control", "no-cache, no-transform"); res.setHeader("Connection", "keep-alive"); const observer: Observer<RepoInformation> = { next: value => { res.write(`event: receivedn`); res.write(`data: ${JSON.stringify(value)}nn`); }, error: (err: Error) => { res.write(`event: data-errorn`); res.write(`data: …
Posted By: Anonymous I have an array fields which represents form fields. These fields are controlled, their values are stored in form. const [fields, setFields] = useState([]) const [form, setForm] = useState({}) … fields.map(function(element, index) { return <input name={‘field ‘+element} key={index} /> }) I can add fields dynamically: setFields([…fields, someNextField]) I can also delete fields: …
Posted By: Anonymous I’m currently designing a new website with NextJS and Tailwind and I would like to make a background that is infinitely translating to the bottom right, just like in this example (but with my own pattern): https://codepen.io/kootoopas/pen/reyqg I’ve actually never worked with SVG patterns before. Though I’ve managed to display an SVG …
Posted By: Anonymous I’m getting a invalid hook call error when using state inside my custom hook. Here’s my code import { useState } from ‘react’; export default function useFetch() { const [randomValue, setRandomValue] = useState<number>(); setRandomValue(3); return randomValue; } the hook is inside my hooks folder on the path: ./src/hooks any reason for that? …
