Category "next.js"

Nextjs change 308 to 301 redirect

My task is to set up a redirect from pages with a trailing slash to a page without a trailing slash through 301 redirects for SEO. By default, nextjs has a 308

SWR not working properly with async fetch

Recently updated SWR - now for some reason my data is not fetching properly. const { data: expressionsData, error: expressionsError } = useSWRImmutable(

Fetch API in DatoCMS doesn't bring all the published posts

I want to fetch all my published blogposts from DatoCMS. Actually, I'm doing this. The problem is that it only brings 65 when I have more than 100... does anyon

Deploying Out folder in NextJS 12.1.0

Before the new version 12.1.0 of NextJS when i ran the command run build && export i would get this Out folder, which I could upload to any host, for e

DropDown and ListBox don't work correctly (Next.js + TailwindCSS + HeadlessUI)

I have issue with dropdown menu. When I click dropdown menu opens and close immediately. I've installed TailwindCSS and HeadlessUI by docs. I've took DropDown f

Error: Request failed with status code 500 but it works after I refresh the page

When I run my Next.Js/MongoDB Project for the first time it always greets me with a "Error: Request failed with status code 500", but after I refresh the page i

how to redirect nextjs app to https on cpanel

I'm new whit Reactjs and Nextjs and I develop an online shop project, I deploy it on a Cpanel and I want to redirect it on SSL port HTTPS how to do it app.js: c

next build command is not ignoring *.stories.tsx files [duplicate]

I am trying to build nextjs project which has [componentName].stories.tsx side by side with component itself. Running next build fails because

How to use next() function in Next JS API like Express JS?

While making an API in Next JS, where I pass three parameter to my API function (req, res, next) here is the code : import catchAsyncErrors from "../../../middl

How can I set a flash variable in Next.js before a redirect?

Laravel in PHP made this easy with https://laravel.com/docs/9.x/session#flash-data, so I figured Next.js would have an easy way too. I thought I'd be able to do

Next.js rewrite with x headers

I have a web app where users can build their own profiles with their usernames like below. ourplatform.com/john ourplatform.com/john/about ourplatform.com/john/

next.js .env.local - process.env keys missing when referenced with a string [duplicate]

I have a lot of values inside a .env.local file. NEXT_PUBLIC_GA_ID = myvariablevalue I wrote a function that checks if these are present: exp

Client side state is not hydrated from server on page reload

The client-side state is not hydrated from the server after creating a new store CodeSandBox Link - https://codesandbox.io/s/vibrant-aryabhata-l29r2b Steps to r

What does "First Load JS" in @next/bundle-analyzer actually measure?

The NextJS bundle analyzer gives some output like this: Page Size First Load JS ^

Can I export multiple named exports in a named set without affecting call to variable?

I have constants file with: export const VAR1 = 'VAR1'; export const VAR2 = 'VAR2'; export const VAR3 = 'VAR3'; export const VAR4 = 'VAR4'; export const VAR5 =

How to make scripts just run one time when app start?

I try to use facebook API for chat plugin.but it just work when i put the script in component like this FacebookPlugin.tsx import Script from "next/script"; imp

Type is not assignable to type 'IntrinsicAttributes & MoralisProviderProps'

I am new to typescript and I really want my initialize on mount to be set to true, Does anyone know why it will only let me set it to false? Here is the error:

CSS animation/keyframe speeds are different when looking at the site locally and on a code sandbox?

I have the exact same code on my local machine as I do on StackBlitz (an online Next.JS sandbox-type website), and for some reason - the animation speed for the

What's hydrate action in Next Redux Wrapper?

Recently I started using Next.js and I have a question about the next-redux-wrapper package. I don't really understand the HYDRATE action. So I wonder concretel

How to create fixed scrolling in Locomotive Scroll in Next.js

I'm currently using Locomotive Scroll with NextJS to implement smooth scrolling. The web app that I'm currently developing with NextJS requires a fixed scrollin