I’m following react.dev docs on conditional rendering and I can’t figure out why conditional rendering using logical AND (&&) operator is not working. It’s working fine using conditional ternary operator (? :). The code "use client"; import { useState } from "react"; export default function Get({ data }) { const [toggleShowData, setShowData] = useState(false); function… Read More Conditional rendering (React.js) using logical AND operator (&&) not working

I am getting the following error when trying to build Nextjs app. Generating static pages (0/20) [= ]TypeError: u is not a function at m (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\.next\server\app\(brewery)\test\Customers\page.js:1:9038) at em (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:131226) at C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:142926 at Array.toJSON (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:146504) at stringify (<anonymous>) at eR (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:134889) at eP (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:135332) at AsyncLocalStorage.run (node:async_hooks:346:14) at Timeout._onTimeout (C:\Users\coool\Documents\AnalyticsBrewery\analytics-brewery-a1\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:12:146956) at listOnTimeout (node:internal/timers:573:17) TypeError: u is… Read More Nextjs app. Everything runs well in Dev environment. npm run build gives an error

I’ve built an accordion component from scratch in NextJS. It’s working perfectly. But I want to keep the first accordion item open by default. How to achieve this? Here’s the code: Accordion Item import { RiAddLine } from "@remixicon/react"; import { useState } from "react"; const AccordionItem = ({ question, answer, isOpen, toggle }:{ question:string,… Read More How to keep the first item of accordion group open by default in NextJS?

i am using nextjs 14 python-course/page.tsx when i am running npm run build on my project, this page is giving error this is my package.json “ { "name": "frontend", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "browser": { "child process": "false" }, "dependencies":… Read More npm run build giving errors in React Hook Functions

I am building my first next.js project, migrating from create-react-app and I am having this weird issue. If I am on home page and refresh the page, styles do persist, but if I go to "/profile" page for example, or any other page besides / page, and refresh the page, the CSS styles completely disappear.… Read More Next js app styles not working on pages after refreshing the page

In nextjs, I have a list of colors and a function that takes a number as an argument and returns a component styled by Tailwindcss that has a distinct color using that number. const listColors = ["lime", "teal", "violet"] function getStyle(idx: number) { const color = listColors[idx % listColors.length]; return `bg-${color}-500 text-${color}-100`; } export default… Read More Programmatically changing colors doesn't work

src/app/user/[username].js [username].js file: import { useRouter } from ‘next/router’ export default function User() { const router = useRouter() return ( <p> {router.query.username} </p> ); } When i go to "localhost:3000/user/john" user/username url returning 404 not found. I followed the examples in the current documentation exactly, but I still get the 404 output. https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes >Solution :… Read More NextJS dynamic routes not working on my localhost

I have a blog page with posts stored in database. I allow users to suggest changes to post and comment it. The path is /app/posts/[name]/page.tsx. Should I use static rendering (https://nextjs.org/learn/dashboard-app/static-and-dynamic-rendering)? I read that it should improve seo a lot. I would appreciate help. >Solution : There are many pros and cons to use static… Read More Should blog post with comments be a static page NextJS

Is there a way in nextjs to create routes like /services/${service.id}/subscriptions? I have many subroutes where the serviceId is needed. My initial fould would be to create a folder structure like so but this doesn’t work. Any ideas? Edit: using page router >Solution : Create the following file structure inside your pages folder. Note how… Read More NextJs routes with param in between routes

I am following a course on learning how to work with react. For some reason my index page isn’t showing anything. I have 4 files – banner.js, app.js, index.js and GloboLogo.png (plus all the other files from running npx create-next-app globomantics). My banner file is this const Banner = () => { return ( <header>… Read More My Index.js is a blank page and I don't think it should be