I'm working on a React.js/Next.js project that utilizes Google reCAPTCHA. My frontend seems to be working (I know because I've set up print statements along the way), but the backend is giving me this error in my local terminal: error…
I'm using React Context to manage state in my application and I'm also using LocalStorage to persist some data between page refreshes. However, I'm running into an issue where the data stored in LocalStorage is not being maintained after a…
Hello I have some ipfs data and it has 300 images. I want to render them but when I try to render them sometimes 3 4 of them is not loaded. it gives me 404 error and won't load. So…
The documentation for using appDir on Next.js 13.4 states the following: Step 3: Migrating next/head In the pages directory, the next/head React component is used to manage HTML elements such as title and meta . In the app directory, next/head…
I have an image and I want to create a new div (on click) with a larger version of the same image. I've tried four approaches: Render div on Click function zoom_img (event) { console.log(event.target); console.log(event.target['data-loaded-src']) const src = event.target['data-loaded-src']…
In the classic Pages Router of Next, You can add a global provider in your _app.js file and wrap it around the entire component tree. This will ensure that the provider is available to all components. If you do this…
I am trying to build an e-commerce demo site with Next.js 13 using the app directory and tRPC. I already made most of the admin dashboard and pretty much all of the core site functionality (cart, ordering, payments with stripe,…
So, I'm new to nextJS. I installed the latest version (13.3.4) using npx create-next-app@latest and it works, serves on port 3000 etc. Now I'm learning about an app directory that houses some layout.tsx and page.tsx files, but I cannot find…
I have a page with two components: table and header. Page: import Header from '@/components/header/header.js'; import Table from '@/components/table/table.js'; export default function TablePage() { return ( <div> <Header /> <main> <Table></Table> </main> </div> ) } Header Component: import { useRouter…
we are currently developing an application with NextJS 13 using next-auth, so far everything is great. Our application uses a custom sign-in page with a CredentialsProvider and we protect our routes using the next-auth middleware. We would like to prevent…