Posts.tsx

import React from 'react'
import fetch from 'isomorphic-fetch'
import { NextFunctionComponent } from 'next'

type Props = {
  posts: readonly RedditPost[]
  subreddit: string
}

// 1. We use NextFunctionComponent type here
const Posts: NextFunctionComponent<Props> = ({ posts, subreddit }) => (
  <div>
    <h1>Posts in "{subreddit}"</h1>
    <ul>
      {posts.map(post => (
        <li key={post.data.id}>{post.data.title}</li>
      ))}
    </ul>
  </div>
)

// 2. This no longer causes a type error
Posts.getInitialProps = async () => {
  const subreddit = 'typescript'
  const response = await fetch(`https://www.reddit.com/r/${subreddit}.json`)
  const result = await response.json() as RedditResult

  return {
    subreddit,
    posts: result.data.children
  }
}