Category "next.js"

Error while using flowbite with nextJS and typescript

I installed tailwind and flowbite to a NextJS project. As I did import "flowbite" in _app.tsx, I get the following error. ReferenceError: document is not defin

ESBuild in NextJS: "You may need an appropriate loader to handle this file type" - /node_modules/esbuild/lib/main.d.ts

I am using mdx-bundler (which uses esbuild + node-gyp) in next.js. I have been working on this project for some time and everything is working. Now my partner j

got error message when create build in next js use keycloak

enter image description here 1] I use react framework next js version 12.1.6 2] work fine in browser but when I create a build that time I got error like this.

Getting error from Next.js basic example walkthrough

I get this error when running the code from the Next JS starter walkthrough: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1174:13)

How can I call parent function in a child React component?

So I want to add delete button, but when I click it I see error: 'TypeError: props.onDeleteTask is not a function' - in component - SingleTask.js //../component

Material-UI V5 RTL with stylis-plugin-rtl

i am useing Material UI 5 with next.js and have implemenmted every steps exactly like the documentation here with emotion and stylis-plugin-rtl v2: https://next

Make div align to bottom of column in card tailwind css

As the title states, I am trying to get a div within a parent div to align across columns using Tailwind CSS. However, they are not aligning due to different im

ReactJs Socket Client doesn't receive data from Flask Socket using emit(... , to=room)

I'm trying to develop a real-time chess app with Flask socket-io and ReactJs. My problem is that when setting emit(..., broadcast=True) on the server-side, the

Next.js: Error: React.Children.only expected to receive a single React element child

I'm having a component called Nav inside components directory and it's code is some thing like below: import Link from 'next/link'; const Nav = () => {

Next.js how to implement react-google-recaptcha in my contact form

I am trying to implement Google Recaptcha on my contact form in Next.js. It does popup the challenge when needed, but sends the form anyway. Here's my code so f

Pages with `getServerSideProps` can not be exported

I think i am making some kind of confusion here. According to the documentation, if i want Server Side Rendering (SSR) for the page i export the async function

Spotify Embed code (iframe) won't work in Markdown

Using React-Markdown on Next.JS, the post pages are stored as Markdown files, but for some reason the Markdown file won't render the iFrame. However if I use a

npm install returns error. Showing "no such file directory ../node_modules/mongodb-client-encryption/deps/lib/...'

I have a pretty big NextJS project going on, using mongodb but I havent been able to run npm install on it as it gives the following error. npm ERR! code 1 npm

How to fix undefined` cannot be serialized as JSON. Please use `null` or omit this value using getStaticprops

i am trying to fetch some data from an api using getStaticProps with next js. It returns the error undefinedcannot be serialized as JSON. Please usenull` or omi

.next folder size increases in Next react App

We have developed the nextjs react application, which is ready in production now. It leads to some storage issues. we inspect a lot and finally found .next fold

Ensuring sensitive code is run only server-side with NextJS, where can such code be ran from?

I'm learning NextJS and I'm trying to determine how to layout my project with a clean architecture that's also secure. However, I'm not sure about where to stor

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/parser' is not defined by "exports" in /usr/app/node_modules/postcss/package.json

Did a docker-compose up to build my project, but there's something wrong and I am getting this error: node:internal/errors:464 ErrorCaptureStackTrace(err);

How can I export a JSON object to Excel using Nextjs/React?

I have an endpoint that retrieves a json object like the following: "data": [ { "id": 1, "temaIndicador": "Indian", "codigo": "001", "observaciones": "Interacti

How can I use Bootstrap 5 with Next.js?

After installing bootstrap with npm install bootstrap I added the style to /pages/_app.js like so: import 'bootstrap/dist/css/bootstrap.css'; export default fun

Is it possible to make a join query with Prisma without a foreign key?

I've been struggling with this for a while but with no success. I have two tables that might have a relation but not necessarily. FIRST +----+-----------+------