Strictly type a NextJS Page


The corresponding Nextjs documentation is here

import Layout from '../../components/layout'
import Head from 'next/head'
import { getAllPostIds, getPostData, PostEntry } from '../../lib/posts'
import { GetStaticProps, GetStaticPaths } from 'next'
import { ParsedUrlQuery } from 'querystring';

export interface PostProps {
    postData: PostEntry   

export interface PostStaticParams extends ParsedUrlQuery {
    id: string;

export default function PostPage({ postData }: PostProps) {
    return (
                <title>First Post</title>
            <br />
            <br />

export const getStaticPaths: GetStaticPaths<PostStaticParams> = async (context) => {
    // Return a list of possible value for id
    const paths = getAllPostIds()
    return {
        fallback: false

export const getStaticProps: GetStaticProps<PostProps, PostStaticParams> = async (context) => {
    const { params } = context;
    const postData = getPostData(
    return {
        props: {

Here are two key types we need to check, simply PostProps and PostStaticParams.

PostProps is the actual props we want to pass to our rendering page.

PostStaticParams is the params given when such page is generated. Typically, it contains the id of the requested resource.

Now we can correctly induce the type of the only parameter context in getStaticProps or getStaticPaths w/o boilerplates.