Sharing information between different pages in NEXT.js version 14

Question

Sharing information between different pages in NEXT.js version 14

After performing a fetch and receiving a successful response containing data as an object, I use router.push to redirect the page to another one where I want to display the fetched data.

const handleSubmit = async (event: any) => {
    event.preventDefault(); 
  
    try {
      const response = await fetch('http://localhost:8080/api/auth/signin', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
  
      const responseData = await response.json();
  
      
      if (responseData) {
        console.log('Login successful!', responseData);
        localStorage.setItem('accessToken', responseData.token);
        localStorage.setItem('username', responseData.username);
        
  
        toast({
          description: "Login successful"
        });
  
        
        router.push({
          pathname: '/', 
          query: responseData  
        });
  
        setFormData({
          username: '',
          password: ''
        });
      } else {
        // If the response is not as expected
        console.error('Unexpected API response:', responseData);
        setError('Invalid credentials. Please try again.');
      }
  
    } catch (error) {
      console.error('Error during login:', error);
    }
  };

I'm encountering errors with the router.push, but how can you effectively pass a response between different pages?

typescript next.js httpresponse

Answer 1

Answer №1

When utilizing the App Router, if you want to pass data from the parent page, you can specify a search parameter in the parent page:

'use client'

import { useRouter, useSearchParams } from 'next/navigation';

export default function ParentPage() {
  // ...

  const router = useRouter();

  const searchParams = useSearchParams();
  
  const handleSubmit = async (event: any) => {
    // ...

    toast({
      description: "Login successful"
    });

    // retrieve current search parameters
    const params = new URLSearchParams(searchParams.toString());
    
    // set a new parameter using the `data` key: `key: value`
    params.set(data, responseData);

    // stringify the parameters for use in `router.push`
    router.push(`/?${params.toString()}`);
  
    // remaining code
  };

  // ...
}

In the child page, extract the data from the search parameters like this:

'use client'

import { useSearchParams } from 'next/navigation';

export default function ChildPage() {
  const searchParams = useSearchParams();

  // get the `data` search parameter
  const data = searchParams.get('data')

  // remaining code
}

This explanation should be beneficial.

Answer 2

When utilizing the App Router, if you want to pass data from the parent page, you can specify a search parameter in the parent page:

'use client'

import { useRouter, useSearchParams } from 'next/navigation';

export default function ParentPage() {
  // ...

  const router = useRouter();

  const searchParams = useSearchParams();
  
  const handleSubmit = async (event: any) => {
    // ...

    toast({
      description: "Login successful"
    });

    // retrieve current search parameters
    const params = new URLSearchParams(searchParams.toString());
    
    // set a new parameter using the `data` key: `key: value`
    params.set(data, responseData);

    // stringify the parameters for use in `router.push`
    router.push(`/?${params.toString()}`);
  
    // remaining code
  };

  // ...
}

In the child page, extract the data from the search parameters like this:

'use client'

import { useSearchParams } from 'next/navigation';

export default function ChildPage() {
  const searchParams = useSearchParams();

  // get the `data` search parameter
  const data = searchParams.get('data')

  // remaining code
}

This explanation should be beneficial.

Sharing information between different pages in NEXT.js version 14

Answer №1

Similar questions

Output Scalable Vector Graphics (SVG) content on a webpage

Transitioning from MVC to Angular 2 and TypeScript: A Step-by-Step Guide

Troubleshooting Angular: Unidentified property 'clear' error in testing

Obtain the dimensions (width and height) of a collection of images using Angular and TypeScript

Utilizing Higher Order Components (HOC) and the useSessionContext hook to address the flickering issue with Supabase Authentication redirection

Show a roster of individuals by inputting values that will populate the list with their names

Interface displaying auto-detected car types

Issues with implementing routing children in Angular 8

Setting up Next.js rendering within Express routing: A step-by-step guide

The 'subscribe' property is not available on the type '() => Observable<any>'

Issue with applying value changes in Timeout on Angular Material components

How can I verify the validity of a regular expression in Typescript without encountering a syntax error?

Exploring Angular data iteration with Tab and its contentLearn how to loop through Tab elements

Having trouble getting the tailwindcss Google font link tag to apply properly

Tips for ensuring proper dependency regulations in javascript/typescript/webpack

cleaner urls using nextjs routing

How can I send dynamic props between pages using Next.js?

Encountered a bun runtime error stating "Possibly require an `extends React.JSX.IntrinsicAttributes` constraint for this type parameter."

Next.js focuses solely on rendering markup and does not run any custom code

Images displaying correctly in Next.js development environment, but failing to load on Github Pages production site