javascript - 将数据(prop)从 _app.js 传递到页面中的 getServerSideProps - NextJS，最新版本

Question

我有一个自定义的 _app.js:

  const Layout = ({ children }) => (children);

  const app = ({ Component, pageProps }) => {

    pageProps.baseUrl = 'some url';

    return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
    )
};

还有一个页面:

export async function getServerSideProps({ req, query, res, baseUrl }) { 
// baseUrl is undefined and an error, if I am using it with destructiring

  console.log(req) // There is no baseUrl

  return { props: { ..... } }
}

我想在 _app.js 中设置 pageProps.baseUrl= 'some url'; 并在包括 getServerSideProps 在内的页面组件中使用它，我该怎么做？

Answer 1

现在，我已经创建了一个文件，其中包含如下所示的所有全局值:

let store = {};

const globalStore = {};

globalStore.set = (key, value) => {
    store = { ...store, [key]: value };
}

globalStore.get = (key) => {
    return store[key];
}


export default globalStore;

然后在_app.js中导入并设置一个值:

const app = ({ Component, pageProps }) => {
    globalStore.set('baseUrl', 'some url 1');
    globalStore.set('baseUrl2', 'some url 2');

    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    )
}

在 pages/index.js 和组件或 getServerSideProps 中导入文件:

export async function getServerSideProps({ req, query, res }) {

    console.log('in getServerSideProps');
    console.log(globalStore.get('baseUrl'));
    console.log(globalStore.get('baseUrl2'));
...