将数据（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'));
...

Answer 2

我认为，在这种特殊情况下，可以在这里使用常量而不是 props。

建议的解决方案

在常量.js 中：

export const BASE_URL = 'some url';

在你的页面中：

import * as Constants from '../path/to/constants';

export async function getServerSideProps({ req, query, res }) { 
  // use Constants.BASE_URL here

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

为什么道具不能按照你想要的方式工作？

您的页面组件和您从文件中导出的 getServerSideProps 方法是分开的，并且在不同的时间执行。渲染组件不会调用 getServerSideProps。我相信 Next.js 中的顺序是这样的：

1. 在路由上发出请求。
2. Next.js 查看pages/ 中的文件寻找对应的路由
3. Next.js 将根据执行上下文运行适当的方法（在服务器渲染上，getServerSideProps）
4. Next.js 渲染 App 组件，将 getServerSideProps 提供的 pageProps 传递给它
5. App 组件渲染页面组件

在这种情况下，您创建了一个悖论。想想道具是如何流动的：

1. getServerSideProps 运行，返回一个 pageProps 对象
2. App 组件呈现，包含从 getServerSideProps 传递的 pageProps 对象
3. 页面组件渲染，传递pageProps

如果 getServerSideProps 负责创建 pageProps 对象，则也不能将该对象作为参数传递。