Encountering an issue with the NEXT_REDIRECT error while utilizing the redirect feature from next/navigation within a server-side function in Next

I have been developing a Next.js application that includes a login form for user sign-in. To handle server-side redirection after successful sign-in, I have integrated the redirect function from next/navigation. However, during testing, I came across the following error:

Sign-in error: Error: NEXT_REDIRECT
at getRedirectError (redirect.js:49:19)
at redirect (redirect.js:60:11)
at handleSignIn (cognitoActions.ts:87:13)
at async eval (login-form.tsx:38:34)

Let me share my current code setup with you:

LoginForm component:

The LoginForm component has various imports and functions for handling user sign-in using React hook forms and Cognito actions.

handleSignIn function:

The handleSignIn function is responsible for signing in users and handling any additional steps required such as confirming sign-up codes.

Despite setting up the redirection on the server side, I am still encountering the NEXT_REDIRECT error. Can someone guide me on how to troubleshoot this issue and implement proper server-side redirection without errors?

typescriptnext.jsaws-amplify

Answer №1

It seems like the issue might be that your code is actually running on the client side. I couldn't find a 'use client' directive in your LoginForm component, but since you're using hooks (which are only for client-side use) and the component is rendering correctly, it's possible that there's a 'use client' somewhere in a parent component that imports LoginForm, making it act as a client component.

Because handleSignIn is executing on the client side, it makes sense that you're encountering an error when trying to call redirect which should be done server-side. Here are two ways you could address this issue:

  • Replace redirect with router.push or router.replace from useRouter. This is essentially a workaround to perform a redirect on the client side.

  • Rework your useSignin function as a server action and integrate it into your form as an action instead of handling it within the submit event.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for an Angular Component to receive a return object from a service following an HTTP

I am currently working with angular 4. Is there a way to retrieve an object from a service in this framework? export class LoginRequest { username : string; password : string; } export class LoginResponse { token : string; message : string; sta ...

angulartypescript

Explore the functionality of a TypeScript-created Vue component by testing it with Vue-test-utils

In my attempt to validate props with various data types in a Vue component (built using TypeScript), I utilized the Vue-test-utils package. Despite implementing expect().tobe(), there remains an untested line: DropDownList.vue <template> <v-sel ...

typescriptvue.jsjestjs

The inferred type of a TypeScript promise resolved incorrectly by using the output value from a callback function

Although some sections of the code pertain to AmCharts, the primary focus of the question is related to TypeScript itself. The JavaScript functions within the AmCharts library perform the following tasks: export function createDeferred(callback, scope) { ...

typescriptamchartsamcharts4

Looking to determine if two elements exist within an array? Seeking a boolean result based on their presence

Consider the following array of objects: quesListArray = [ { QuestionTypeID : 1, QuestionTypeName : 'Rating' }, { QuestionTypeID : ...

typescript

Encountering a problem with Vue StripeCheckout while navigating to a different component

I'm looking to integrate the StripeCheckout component into my Vue application. After copying and updating their example code using the composition API from here, everything works fine when I route to the subscribe component. However, if I try to navig ...

typescriptvue.jsstripe-paymentsvuejs3

The submission functionality of an Angular form can be triggered by a separate button

I am currently developing a Material App using Angular 12. The Form structure I have implemented is as follows: <form [formGroup]="form" class="normal-form" (ngSubmit)="onSubmit()"> <mat-grid-list cols="2" ...

typescriptangular-materialform-submitangular12

Updating a specific element within a list using AWS DynamoDB

In my DynamoDB database, I have the following table structure: { UserId: "123456", Orders: [ { OrderId: "ORD123", OrderRef: "Christmas presents", OrderStatus: 0, ...

next.jsamazon-dynamodb

Tips for bypassing arrow functions when sending prop values to another component?

**Stateful ApplicatorType Component** class ApplicatorType extends Component { public state = { applicatorTypes: ['Carpenter', 'Painter', 'Plumber'], applicatorTypesSelected: [], } public render() { allotedTypes = ( &l ...

reactjstypescript

Create a new array in JavaScript by comparing and finding the differences between two existing arrays

I have two arrays - array1 and array2. I want to compare both arrays and create a new array (array3) with values that are unique to array1. For example, 'mob2', 'pin', 'address2', 'city' are present in array1 but no ...

javascripttypescript

Retrieve various data types through a function's optional parameter using TypeScript

Creating a custom usePromise function I have a requirement to create my own usePromise implementation. // if with filterKey(e.g `K=list`), fileNodes's type should be `FileNode` (i.e. T[K]) const [fileNodes, isOk] = usePromise( () => { ...

reactjstypescripttypescript-generics

Issue with Formgroup in Angular Reactive Form - Validation not functioning as expected

I am working with a form group which is defined below: get createItem(): FormGroup { return this.formBuilder.group({ name: ['', Validators.required], email: ['', Validators.required], mobile: ['', V ...

angulartypescriptangular-reactive-formsformgroupsangular-validation

Implementing Autocomplete feature in Reactjs with Ant Design Library

In my React application, I created an autocomplete feature with a list of options for the user to select from. Example in Action: Click here to see the demo List of available options: const options = [ { label: "hello", value: "1" ...

javascriptreactjstypescriptautocompleteantd

How can I incorporate a JavaScript module into my Typescript code when importing from Typeings?

Exploring Angular2 and Typescript with the help of mgechev's angular2-seed for a new project has been an interesting experience. However, I have encountered a problem along the way. My intention is to incorporate Numeral into a component, and here ar ...

javascripttypescriptangular

`How can a user be redirected in the Server component of Nextjs version 13?`

I'm a beginner with next js and looking for ways to redirect a user from a server component without relying on the "use client" method ...

reactjshttp-redirectnext.js

The specified 'contactId' property cannot be found within the data type of 'any[]'

I am attempting to filter an array of objects named 'notes'. However, when I attempt this, I encounter the following error: Property 'contactId' does not exist on type 'any[]'. notes: Array < any > [] = []; currentNot ...

arraysangulartypescriptangular6

Tips for effectively unit testing the Angular @viewChild directive with ElementRef

In my component file, I have the following code snippet @ViewChild('clusterCard', { static: false }) clusterCard: ElementRef; highLightTheClusterCard(point: PickupClusterPoint) { if (point) { const card: HTMLElement = _get(this.cluster ...

angulartypescriptviewchildangular-unit-test

Generate a pre-signed URL for an AWS S3 bucket object using Typescript in NextJS, allowing for easy file downloads on the client-side using @aws-sdk/S3Client

In the utilization of v3 of the S3Client, it appears that all existing examples are based on the old aws-sdk package. The goal is for the client (browser) to access a file from S3 without revealing the key from the backend. From my research, it seems tha ...

typescriptnext.js

Error encountered while working with SVG in a functional React component with typescript

I have a customized icon component that looks like this: import React from 'react'; type IconProps = { width?: number; height?: number; color?: string; styleName?:string; }; const MyIcon: React.FC<IconProps> = ({ width ...

javascriptreactjstypescriptsvg

JS implementing a listener to modify a Google Map from a separate class

Currently, I am in the process of migrating my Google Map functionality from ionic-native to JavaScript. I am facing an issue while attempting to modify the click listener of my map from a separate class. The problem seems to be related to property errors. ...

javascriptangulartypescriptionic2

What causes the error message when attempting to assign an argument of type 'any[]' to a parameter expecting type 'never'?

I encountered the following error in this code: Argument of type 'any[]' is not assignable to parameter of type 'never' var markers: []; this.Getlapoints(this.map.getCenter(), 500000).then(data => { for (var key in data) { ...

javascripttypescriptleaflet