NEXTJS：getServerSideProps 不适用于组件答案

【问题标题】：NEXTJS: getServerSideProps not working into componentsNEXTJS：getServerSideProps 不适用于组件
【发布时间】：2021-01-16 00:48:55
【问题描述】：

下面是位于“Pages/home.js”的代码。 // 本地主机：3000/home

import axios from 'axios';
import Section1 from '../components/home-sections/section-1';

const Homepage = ({ show }) => {
    const Html = JSON.parse(show.response.DesktopHTML);
    const renderSection = () => {
        return Html.map((itemData,index)=>{
            return(<div key={index}>{itemData.DisplayName}</div>)
        })
    }

    return(
        <div>
            { renderSection()}
            <Section1 />
        </div>
    )
}

export const getServerSideProps = async ({ query }) => {
 
  try {
    const response = await axios.get(
      `https://api.example.com/getHomeSection?title=Section 1`
    );
    
    return {
      props: {
        show: response.data,
      },
    };
  } catch (error) {
    return {
      props: {
        error: error.error,
      },
    };
  }
};

export default Homepage;

现在我添加到 section-1.js 中的相同代码，该文件位于“components/home-sections/section-1.js”

现在getServerSideProps 在 home.js 中工作正常，但在 section-1.js 中却不工作。

Error: TypeError: show is undefined in section-1.js

【问题讨论】：

标签： next.js

【解决方案1】：

您不能在非页面组件中使用getServerSideProps。您可以将 prop 从 Home 传递到 HomeSection 或创建一个上下文，以便可以从组件树全局获取该值

getServerSideProps 只能从页面导出。您无法导出它来自非页面文件。

https://nextjs.org/docs/basic-features/data-fetching#only-allowed-in-a-page-2

【讨论】：

Here 展示了如何将道具传递给组件