I'm working on a Next.js application that has pagination. My pagination links are at the bottom of the page. When I scroll to the bottom and click a new page, I stay at the bottom of the page. What I…
I’m trying to fetch city data using the OpenCage API and display the results in a list using React and Chakra UI. However, I'm getting the following error: Error: Element type is invalid: expected a string (for built-in components) or…
I recently created a Next.js app using the CLI, and when I tried to run the development server with npm run dev, I encountered this error: You are using Node.js 18.15.0. For Next.js, Node.js version >= 18.17.0 is required. However,…
So I use Chakra in my Nextjs 13 project, I have this code: const Home = () => { const color = useColorModeValue("telegram.500", "telegram.400"); return <div>something here</div> } I get this error: Error: (0 , _chakra_ui_react__WEBPACK_IMPORTED_MODULE_2__.useColorModeValue) is not a function…
I'm working on a Next.js API route to handle user registration. The code is supposed to check if a username is already taken and return an appropriate response. However, I'm encountering an issue with the Response.json method. import dbConnect from…
In my nextjs app, I am trying to fetch data by using async await mechanism like this export const getHomeData = async (tokenCalled4PublicApis: string) => { try { // const all = getCookie('XSRF-TOKEN', { cookies }); // console.log('all cookies', all);…
I have a theme switch toggle on the top AppBar which is a client component. The main layout is SSR and uses the nextjs App router. It has theme settings <ThemeProvider theme={lightOrDarkTheme}>. Prior to App router/SSR I was able to…
For this question I have created the following demo Next.js application using the App directory: It has a standard RootLayout in app/layout.tsx. It has a nested Layout in a route group app/(app)/layout.tsx. This layout contains <nav />. It has two…
I have been following a tutorial which uses the /pages directory, however, the newer versions of NextJS are using the /app directory. How to adapt the following pages into the new behavior. /pages/index.tsx import Head from "next/head"; import { useState…
Ok. So. I'm building a simple e-commerce site using Next.js (version 13.4) and React; I am using the app router and server actions. I've successfully integrated the PayPal SDK for payments. Right now, I'm using react-paypal-js to render the buttons…