How to type a page component with props in Next.js?

You need to pass the Home props type (in your case { events: Event[] }) as the generic type to NextPage.

import { Event } from '../ts/interfaces';

const Home: NextPage<{ events: Event[] }> = ({ events }) => {
    return (
        <div>
            {events.map((event: Event) => (
                <div key={event.title}>{event.title}</div>
            ))}
        </div>
    );
};

Leave a Comment