Category "next.js"

Using Prisma with Yarn v3

I am building an app using Next.js, Next-Auth, and Prisma. I am using API Routes for backend code. Recently, I upgraded Yarn on my pc to v3.1.1. I then created

NextJs Link component wrapping Image causes errors when mapping over array unless used in top level page component

I am trying to utilise NextJs's <Link /> tag to wrap a NextJs <Image /> in my application, to map over an array of data. If I place a <Link />

Next.js Global CSS cannot be imported from files other than your Custom <App>

My React App was working fine, using global CSS also. I ran npm i next-images, added an image, edited the next.config.js, ran npm run dev, and now I'm getting

Flash Of Unstyled Text (FOUT) on reload using next.js and styled components

I'm using global style from styled components with next.js and every time I reload my page I can see the font flickering. I have my font files in public/fon

head tag not appearing in view source : next:js

i have created my next js appp where i have implemented my head tag but when i check the view source by right clicking i dont see my title and meta tags there

NextJS: How to handle multiple dynamic routes at the root

Goal: I would like to achieve github style routing, where abcd in github.com/abcd could resolve to a user profile page or a team page. I currently have a v

NextJS - export is broken (no CSS, no JS)

I am using NextJS (https://nextjs.org/) Version 9.0.6. My next.config.js looks like this: /* eslint-disable */ const withLess = require("@zeit/next-less"

nextjs API with typescript, restricting NextApiRequest query param to just string type [duplicate]

In this endpoint handler, is there a way to restrict req.query in NextJS NextApiRequest to just string types rather than string | string[]. Fo

Chakra UI color mode changes on page refresh, because of system color mode

I'm running NextJS with Chakra UI and the problem is when useSystemColorMode is set to true, it ignores the user's choice on page refresh and sets it back to th

How to deploy monorepo powered by turborepo to Vercel?

Recently, Turborepo is acquired by Vercel. So I was excited to experiment with that. I created a turbo repo project by running pnpx create-turbo Then I tried t

Prisma Issue of managing instances of Prisma Client actively running

I'm new to Prisma and Nodejs I accidentally created lots of instances of Prisma Client that keep displaying the warning of warn(prisma-client) There are already

How can I create dynamic titles in next.js <head> section?

I have a fully functioning website but the head sections doesn't retrieve page specific <title> and <meta description>. For example, if I'm on the

Next.js: custom font raises blinking

I'm creating Material-UI application using Next.js template. After custom font has been provided via npm/next-fonts the problem of twice font fetching is appear

How to defer after the fold video load after page loads in React/NextJS

I'm trying to up my lighthouse scores by loading a video after the page has fully loaded. It's after the fold and will not be seen until scroll so I want it to

How do I get the address of the connected wallet with web3modal?

I'm building an application with next.js and web3. To connect the user wallet to the front-end I'm using web3modal as following: const Home: NextPage = () =>

nextjs global css header element doesn't apply to a parsed markdown, replaced by tailwindcss instead

I tried to parse markdown into html. the markdown does parsed as expected, the problem is it doesn't render to what I expected. I expected the header to be auto

React functional component - is it possible to pass props to { children }? [duplicate]

Workaround at the bottom of the question. I am trying to pass props down to a child component using {children}. The Father component: const Fa

React functional component - is it possible to pass props to { children }? [duplicate]

Workaround at the bottom of the question. I am trying to pass props down to a child component using {children}. The Father component: const Fa

NextJS - react-springy-parallax doesn't work

I'm trying to use react-springy-parallax in my NextJS project, but whenever I want to use it, I get the following error message: Fetch API cannot load webpa

NextJS - react-springy-parallax doesn't work

I'm trying to use react-springy-parallax in my NextJS project, but whenever I want to use it, I get the following error message: Fetch API cannot load webpa