CODEWITHSUNDEEP
next.js
Prashant Patil
Prashant Patil

Reputation: 2573

NEXTJS: getServerSideProps not working into components

Below is the code located at "Pages/home.js". // localhost: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;

Now same code I added into section-1.js and this file is located to "components/home-sections/section-1.js"

Now getServerSideProps is working fine in home.js, but in section-1.js it is not working.

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

Upvotes: 40

Views: 79116

Answers (5)

Jesus Iniesta
Jesus Iniesta

Reputation: 12519

getServerSideProps can only be exported from Page components. It will not be run on components imported into a page.

However, you could export a function from the component that returns the props, and call that function from the page's getServerSideProps function.

  1. Create a getServerSideProps function on the component.

    // @components/MyComponent.tsx
import { GetServerSidePropsContext } from 'next';

function MyComponent(props: IMyComponentProps) {
    return (<div>MyComponent</div>;)
}

MyComponent.getServerSideProps = async (context: GetServerSidePropsContext): Promise<{ props: IMyComponentProps }> => {
    return { props: { ... } };
}

export default MyComponent;

  2. In your page's getServerSideProps function, call the component's getServerSideProps function and merge the props from the component with the props from the page.

    // mypage.tsx
import MyComponent from '@components/MyComponent';

const Page: NextPageWithLayout = (props: IIndexPageProps) => {
    return <MyComponent />;
}

export async function getServerSideProps(context: GetServerSidePropsContext): Promise<{ props: IIndexPageProps }> {
    let componentServerSideProps = await MyComponent.getServerSideProps(context);
    let otherServerSideProps = { props: { ... } };

    return {
        props: {
            ...componentServerSideProps.props,
            ...otherServerSideProps.props
        }
    };
}

Upvotes: 16

Dave Lee
Dave Lee

Reputation: 524

You gotta use generateStaticParams() from Next.js v13. Here's the reference: https://nextjs.org/docs/app/api-reference/functions/generate-static-params

Upvotes: 1

Okiemute Gold
Okiemute Gold

Reputation: 548

Using the latest Next.js version (13)

Data fetching is now done in a different way.

Reference: Data Fetching. See also, Migrating From Pages to App

Upvotes: 4

john-weak
john-weak

Reputation: 99

getServerSideProps won't work in components it needs to be implemented on a page only and if you are using the next.js-13 app directory, it won't work there as well, you need to use the pages directory

in the app directory, you just need to write use client in the first line for client components and leave it empty for server components

Upvotes: 5

Andrew Zheng
Andrew Zheng

Reputation: 2858

You cannot use getServerSideProps in non-page components. You can either pass the prop from Home to HomeSection or create a context so the value can be available globally from the component tree

getServerSideProps can only be exported from a page. You can’t export it from non-page files.

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

Upvotes: 71

Related Questions