I'm learning next.js with React with tailwind css and was looking to read html static files from the public/assets folder: import React from 'react'; import fs from 'node:fs'; import parse from 'node-html-parser'; const HTMLComponent = ({ filename } : string)…
I am working on a Next.js project using Tailwind CSS with JIT mode enabled. I've encountered an issue where custom utility classes defined inside the @layer utilities block in my theme.css file are not being compiled and applied as expected.…
I created a app/components/Header.js component. export function Header() { return <> <header className="w-full h-14 grid grid-cols-12 bg-gray-50 text-black dark:bg-gray-900 dark:text-white"> <div className="left self-center col-span-3"> <div className="logo text-black dark:text-white ml-6 text-xl"> <a href="#">Logo</a> </div> </div> <div className="center self-center col-span-6 text-center"> <p>{…
I searched in articles and YouTube videos about how to fix error 404 when calling a API router for example /api/hello/ even when I saw the documentation in Next.js website I didn't find any solution for this problem, and I…
Is there a better way to do the following (having a component return null)? In my Page component I need to update my pageTitle state that is rendered in a component further up the tree. layout.tsx: import { PageTitleProvider }…
I am making user role base protected routes in next.js in middleware.js but suddenly started getting this. Not sure why this happening if you guys have better way to implement that please let me know. Here is how I am…
const DummyData = [ { _id: 1, title: "lorem ipsum", desc: " ", cta: "Explore Service", ctaUrl: "/", theme: "#E4F8ED", btnTheme: "#4F9D73", links: [ { title: "Project lorem ipsum Tools ", url: "/", }, { title: "Augmented lorem ipsum ",…
I am using NextJS 14 to setup routing. I am using root layout in app/layout.js to check for jwt tokens and conditionally allow page rendering or redirect to /auth/login. However in doing so, I am getting 2 back-to-back errors. First…
I am getting errors with uploadthing and NextJS. The upload functionality worked before the version 14 and now doesn't. I tried reverting to the previous version of NextJS 13 and now I'm getting console errors (Windows VSCode Terminal). PS C:UsersHPDesktopDevelopmentKind…
Modifying the first of item in an array - two ways: one modifies the items directly one creates a copy of the array Which way is the correct way to do it? const [testArray, setTestArray] = React.useState([{ name: 'value0' },…