Next.js getServerSideProps 始终未定义

Question

I've been starting with a new Next application and going with functional components instead of class-based wherever possible. Following the documentation , I've set up the following with no luck:

import React from 'react';
import { GetServerSideProps, InferGetServerSidePropsType } from 'next';

export const getServerSideProps: GetServerSideProps = async () => {
    return {
        props: {
            results: [1,2,3],
        },
    };
};

function Page({results}: InferGetServerSidePropsType<typeof getServerSideProps>) {
    console.log(results) // undefined
    return (
        <div className="app__page header">page here</div>
    )
}

export default Page;

Regardless of what I've tried I can't get any data back from getServerSideProps , any help would be greatly appreciated!

Answer 1

Nothing wrong with the code but it could be in a wrong place.

Make sure that is a Next.js page and located in pages directory as getServerSideProps only allowed in a page.

You should see printed [1,2,3] on server-side and in the browser console.

Answer 2

Possible you used custom _app page (eg pankod boilerplate), and it not provide correct ServerSideProps to component.

Also remember that current version of Next.js with custom _app currently does not support Next.js Data Fetching methods like getStaticProps or getServerSideProps.

Read more at https://nextjs.org/docs/advanced-features/custom-app