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: { ..... } }
}

我想在 pageProps.baseUrl= 'some url'; 中设置 _app.js 并在包括 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 是可以的。

建议的解决方案

在constants.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 中的顺序是这样的：

在路由上发出请求。
Next.js 查看 pages/ 中的文件以获取相应的路由
Next.js 将根据执行上下文运行适当的方法（在服务器渲染上，getServerSideProps）
Next.js 呈现 App 组件，将 getServerSideProps 提供的 pageProps 传递给它
App 组件呈现页面组件

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

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

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

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

2 个答案:

建议的解决方案

为什么道具不能按照您希望的方式工作？