I just switched from ReactJS to NextJS and I can't find how to pass props from _app.js to a page.

I'm trying to call a function in _app.js from a different page. In ReactJS it was straight forward, since you had to make your own Router, you could just pass props from App.js down to the pages. Now in NextJS I'm not explicitly calling the page, so I can't pass the props anywhere.

What is the way to do it in NextJS?

I just switched from ReactJS to NextJS and I can't find how to pass props from _app.js to a page.

I'm trying to call a function in _app.js from a different page. In ReactJS it was straight forward, since you had to make your own Router, you could just pass props from App.js down to the pages. Now in NextJS I'm not explicitly calling the page, so I can't pass the props anywhere.

What is the way to do it in NextJS?

• javascript
• reactjs
• next.js

Share Improve this question Follow asked Mar 19, 2022 at 9:51 SJ19SJ19 2,1231010 gold badges3939 silver badges8080 bronze badges 1

• 1 How did you circumvent the issue since March? – Samuel Nihoul Commented May 25, 2022 at 12:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

_app.js

function MyApp({ Component, pageProps }) {
const yourFunction(); // this is your function you created

return <Component {...pageProps} yourFunction ={yourFunction}/> // here you pass it as a prop
} 

In page.js

default export function Page({yourFunction}) { // destructure the function 

yourFunction(); // use the function
} 

Here is an example for redux

Cover <Component/> with redux <Provider/>

import { store } from "../redux/store/store";
import { Provider } from "react-redux";

export default function MyApp({ Component, pageProps }) {
    return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>
    );
}