javascript Passing Data between components on route change using Next.js 15

[BrilliantBrilliant is verified member.]

In Next.js 15 (or earlier versions), you can pass data between components during route changes using several techniques, such as URL query parameters, the router.push method with state, or shared state management libraries like Context or Redux.

Here are the most common ways to handle this:


---

1. Using URL Query Parameters

You can pass data in the query string and retrieve it in the destination component using useRouter.

Example: Passing Query Parameters

Source Component:

import { useRouter } from 'next/router';



export default function SourceComponent() {

  const router = useRouter();



  const handleNavigate = () => {

    router.push({

      pathname: '/destination',

      query: { name: 'John Doe', age: 30 }

    });

  };



  return <button onClick={handleNavigate}>Go to Destination</button>;

}

Destination Component:

import { useRouter } from 'next/router';



export default function DestinationComponent() {

  const router = useRouter();

  const { name, age } = router.query;



  return (

    <div>

      <h1>Received Data</h1>

      <p>Name: {name}</p>

      <p>Age: {age}</p>

    </div>

  );

}

---

2. Using Router State (router.push with state)

Starting in Next.js 13+, you can pass state with router.push. This state is not reflected in the URL.

Example: Using Router State

Source Component:

import { useRouter } from 'next/router';



export default function SourceComponent() {

  const router = useRouter();



  const handleNavigate = () => {

    router.push('/destination', undefined, { shallow: true, state: { user: { name: 'John', age: 30 } } });

  };



  return <button onClick={handleNavigate}>Go to Destination</button>;

}

Destination Component:

import { useRouter } from 'next/router';

import { useEffect, useState } from 'react';



export default function DestinationComponent() {

  const router = useRouter();

  const [state, setState] = useState(null);



  useEffect(() => {

    const { state } = router; // Access the state passed during navigation

    setState(state);

  }, [router]);



  return (

    <div>

      <h1>Received Data</h1>

      {state && (

        <>

          <p>Name: {state.user.name}</p>

          <p>Age: {state.user.age}</p>

        </>

      )}

    </div>

  );

}

---

3. Using Context API

The React Context API is great for sharing state across components without relying on props or query parameters.

Example: Using Context API

Context Setup (context/UserContext.js):

import { createContext, useState } from 'react';



export const UserContext = createContext();



export function UserProvider({ children }) {

  const [user, setUser] = useState(null);



  return (

    <UserContext.Provider value={{ user, setUser }}>

      {children}

    </UserContext.Provider>

  );

}

Source Component:

import { useContext } from 'react';

import { UserContext } from '../context/UserContext';

import { useRouter } from 'next/router';



export default function SourceComponent() {

  const { setUser } = useContext(UserContext);

  const router = useRouter();



  const handleNavigate = () => {

    setUser({ name: 'John Doe', age: 30 });

    router.push('/destination');

  };



  return <button onClick={handleNavigate}>Go to Destination</button>;

}

Destination Component:

import { useContext } from 'react';

import { UserContext } from '../context/UserContext';



export default function DestinationComponent() {

  const { user } = useContext(UserContext);



  return (

    <div>

      <h1>Received Data</h1>

      {user ? (

        <>

          <p>Name: {user.name}</p>

          <p>Age: {user.age}</p>

        </>

      ) : (

        <p>No data received</p>

      )}

    </div>

  );

}

Wrap Your App in UserProvider (_app.js):

import { UserProvider } from '../context/UserContext';



export default function App({ Component, pageProps }) {

  return (

    <UserProvider>

      <Component {...pageProps} />

    </UserProvider>

  );

}

---

4. Using Local Storage or Session Storage

For small-scale data, you can use localStorage or sessionStorage to persist data across routes.

Example:

Source Component:

import { useRouter } from 'next/router';



export default function SourceComponent() {

  const router = useRouter();



  const handleNavigate = () => {

    localStorage.setItem('user', JSON.stringify({ name: 'John', age: 30 }));

    router.push('/destination');

  };



  return <button onClick={handleNavigate}>Go to Destination</button>;

}

Destination Component:

import { useEffect, useState } from 'react';



export default function DestinationComponent() {

  const [user, setUser] = useState(null);



  useEffect(() => {

    const userData = localStorage.getItem('user');

    if (userData) {

      setUser(JSON.parse(userData));

    }

  }, []);



  return (

    <div>

      <h1>Received Data</h1>

      {user ? (

        <>

          <p>Name: {user.name}</p>

          <p>Age: {user.age}</p>

        </>

      ) : (

        <p>No data received</p>

      )}

    </div>

  );

}

---

Each method is suited for different use cases:

Use query parameters for sharing data through the URL.

Use router state for lightweight, temporary data not requiring persistence.

Use Context API for global state management.

Use localStorage/sessionStorage for persistent data across page reloads.