如何正确键入 Next.js getServerSideProps 作为 Function 声明

Question

I'm working with typing getServerSideProps ( guide docs , API reference docs ) but all of the documentation that I can find relates to declaring it as a function expression. I'm looking to code it as a function declaration but can't find any documentation on it and am having trouble getting it to work.

As a function expression (this works):

import { GetServerSideProps } from 'next';

export type Data = {
  example: string,
};

export const getServerSideProps: GetServerSideProps<data: Data> = async (context) => {
    const data: Data = { example: '' };
    ...
    return {
        props: data
    };
}

This is where I'm at with it as a function declaration:

import { GetServerSideProps, GetServerSidePropsContext } from 'next';

export type Data = {
    example: string,
};

export async function getServerSideProps(context: GetServerSidePropsContext): Promise<GetServerSideProps<data: Data>> {
    const data: Data = { example: '' };
    ...
    return {
        props: data
    };
}

TypeScript is happy with this as far as the declaration itself goes, but I get an error on the component declaration TS2339: Property 'example' does not exist on type 'never'.

export default function ExampleComponent(data: InferGetServerSidePropsType<typeof getServerSideProps>) {
    return (
        <>
            <p>{data.example}</p>
        </>
    );
}

What am I missing? How can I properly use a function declaration for getServerSideProps and get the typing right?

Thanks.

Answer 1

This works but see my other answer which makes better use of the types provided by Next.js.

Looks like I found an answer to this myself but if this can be done better then I'd appreciate hearing about it.

import { GetServerSidePropsContext } from 'next';

export async function getServerSideProps(context: GetServerSidePropsContext): Promise<{props: Data}> {
    const data: Data = { example: '' };
    ...
    return {
        props: data
    }
}

Answer 2

Ok pretty sure I found the correct answer to this now, having discovered the GetServerSidePropsResult type from next .

import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next';

export async function getServerSideProps(context: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Data>> {
    const data: Data = { example: '' };
    ...
    return {
        props: data
    }
}