ReactJS + NextJS - 如何将道具从 _app.js 传递到页面？

Question

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?

Answer 1

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

Answer 2

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