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

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

2 Answers 2

_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>
    );
}