useEffect(() => { console.log("this is first useEffect", "first"); }); useEffect(() => { console.log("this is second useEffect", "second"); }); useEffect(() => { const listen = onAuthStateChanged(auth, (user) => { setLoading(true); if (user) { setAuthUser(user); setLoading(false); console.log("this is third useEffect",user) } else…
I am having file structure like this: ├── books ├── reviews ├── [title].jsx <- want to route here │ └── page.jsx └── page.jsx On the /books page I generate a list of books, each of it it's has it's own…
I am new to Web Development and next.js and i am trying to figure out that when i console.log my environment variables inside my page.jsx it shows the values correctly but when i try to console.log them in my router.js…
I am new to Next.js. I am trying to send the props to child component which is a response from api call. But when ever I try to add the props in the child component it is giving me RangeError:…
When I run npm run dev in my nextjs project I get the following error: .../node_modules/next/dist/server/web/spec-extension/request.js:28 class NextRequest extends Request { ^ ReferenceError: Request is not defined at Object.<anonymous> (.../node_modules/next/dist/server/web/spec-extension/request.js:28:27) at Module._compile (node:internal/modules/cjs/loader:1097:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10) at Module.load (node:internal/modules/cjs/loader:975:32) at…
I use padding top 120px. After using padding top hover not work properly. Why is this happening?Here is my code: 'use client'; // eslint-disable-next-line no-unused-vars import React, { useState } from 'react'; // eslint-disable-next-line no-unused-vars import {BsChevronCompactLeft , BsChevronCompactRight} from…
I am using an external react component that is imported into my nextjs app code, this is how the component looks like <AppBar className={clsx(classes.header)}> </AppBar> export const header = makeStyles((theme) => ({ header: { [theme.breakpoints.down('md')]: { padding: `0 ${theme.spacing(4)}px`, },…
I am trying to add Sign in with google option in nextjs using next-auth, here is my [...nextauth].js file which is in api/auth folder: import NextAuth from "next-auth"; import GoogleProvider from "next-auth/providers/google"; export default NextAuth({ providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID,…
im fetching data asynchronously then passing it to a client component as props then sitting the state of the client component and displaying it but it's not working the props are passing fine but the state is not getting set…
Stack Backend: django (dj_rest_auth for authentication) Frontend: nextjs (next-auth for authentication, environment variables are set correctly.) OS: Debian 12 - bookworm Dependencies: redis, memcached, rabbitmq running inside LXD - Ubuntu 22.04 container Summary i have a nextjs(13+)+django(4.2+) application up and…