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:
Destination Component:
---
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:
Destination Component:
---
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):
Source Component:
Destination Component:
Wrap Your App in UserProvider (_app.js):
---
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:
Destination Component:
---
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.
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:
JavaScript:
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:
JavaScript:
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:
JavaScript:
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:
JavaScript:
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):
JavaScript:
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:
JavaScript:
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:
JavaScript:
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):
JavaScript:
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:
JavaScript:
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:
JavaScript:
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.
