將數據（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: { ..... } }
}

我想設置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

我認為，在這種特殊情況下，可以在這里使用常量而不是道具。

建議的解決方案

在常量.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 組件渲染 Page 組件

在這種情況下，你創造了一個悖論。 想想道具是如何流動的：

1. getServerSideProps 運行，返回一個 pageProps object
2. 應用組件渲染，包含從 getServerSideProps 傳遞的 pageProps object
3. 頁面組件渲染，傳遞了 pageProps

如果 getServerSideProps 負責創建 pageProps object，也不能將 object 作為參數傳遞。