Category "next.js"

Error: Hydration failed because the initial UI does not match what was rendered on the server with useSession() and react-bootstrap

I am using next.js, react18 and next-auth. I have a login component that checks the session and displays a login or logout link, depending on you are logged in

Generating PDF in next.js

Hii i am trying to generate PDF in next.js. I tried many libraries like react-pdf, jsPDF etc. but all they are client side library they need window to perform t

How to verify the token and get score using react-google-recaptcha-v3?

I'm using the library react-google-recaptcha-v3 in order to integrate reCAPTCHA v3 into my React application, which also uses Next. There's the following exampl

Return two values from getStaticPaths

I'm using getStaticPaths to create a product page within NextJS. I get my products from wooCommerce, problem is: I want to use "permalink" for my NextJS route U

using react router with next.js

I am learning how to use Next.js/React for my application. I am currently researching the topic of routing and I had a few questions. I know that you can use re

Next.js, using random properties without triggering "did not match on server/client" error

I'd like to randomly generate the id property of form inputs, to prevent them from potentially conflicting with other inputs with the same id. This could happen

Next.js, using random properties without triggering "did not match on server/client" error

I'd like to randomly generate the id property of form inputs, to prevent them from potentially conflicting with other inputs with the same id. This could happen

Reference error window not defined error in Web3

Here is my code: import Web3 from './web3'; if (window.ethereum) { window.web3 = new Web3(ethereum); try { // Request account access if needed

Next Auth "Credentials" redirection when throwing error on custom login page

I have a custom login page, which in turn calls the signIn() function when submitting the form. I am only using the "Credentials" provider. Server-side, I am ju

How to use syntax code highlighting using next-mdx-remote?

I'm trying to highlight my code syntax using next-mdx-remote in my Nextjs based page. I'm getting my markdown format from graphcms and rendering it like this :

Why can't I deploy my next.js app to port 80?

I never deployed any project before and I'm currently running with an issue while deploying a next.js app to godaddy. I uploaded my next.js app to the public_ht

How to detect the device on React SSR App with Next.js?

on a web application I want to display two different Menu, one for the Mobile, one for the Desktop browser. I use Next.js application with server-side rendering

Next.js, Strapi - Fetch response is empty

I have nextjs frontend that fetch data from strapi backend. Problem is that data is empty even if i can see on strapi dev logs that request has been made. This

Conditionally use next.js app or create react app with the same website domain according to users login

I have a website which I've built with CRA, node.js and I want to use ISR for most of the pages. The problem is that about 20% of the users are registered users

Why in NextJS, logo is not visible when visiting from page URL

My logo is not loading with /page URL Screenshot Here is my components/LayoutWrapper.js import Image from 'next/image' import icon from '../assets/images/Icon

NextJS URL rewrite creates duplicate pages?

I just setup URL rewrites in NextJS to translate my URLs for my multilingual website. This is how my next.config.js file looks: module.exports = { i18n: {

How to resolve 'error - InvalidDatasourceError: Datasource URL should use prisma'

So I am using Prisma as an ORM on my project to communicate with the database that I set up with AWS. Not happy with the AWS service I am now switching my datab

How to resolve 'error - InvalidDatasourceError: Datasource URL should use prisma'

So I am using Prisma as an ORM on my project to communicate with the database that I set up with AWS. Not happy with the AWS service I am now switching my datab

Chakra-UI Text component noOfLines doesn't display right in Safari

I havea a Chakra-UI Text component in a Next.js TypeScript web app. The noOfLines doesn't display right in Safari, but correct in Chrome. Any suggestions?

How to pass parameters in Next.js without SSR?

I try pass params as docs says here: https://nextjs.org/docs/routing/dynamic-routes but the received params are not string??!! How could it be string array? I u