diff --git a/types/next/app.d.ts b/types/next/app.d.ts
index 2d6e79faa1..392b997f89 100644
--- a/types/next/app.d.ts
+++ b/types/next/app.d.ts
@@ -42,10 +42,15 @@ export interface AppProps<Q extends DefaultQuery = DefaultQuery> {
  * App component type. Differs from the default type because the context it passes
  * to getInitialProps and the props is passes to the component are different.
  *
+ * @template P Component props.
  * @template IP Initial props returned from getInitialProps.
  * @template C Context passed to getInitialProps.
  */
-export type AppComponentType<IP = {}, C = NextAppContext> = NextComponentType<IP & AppProps, IP, C>;
+export type AppComponentType<P = {}, IP = P, C = NextAppContext> = NextComponentType<
+    P & AppProps,
+    IP,
+    C
+>;
 
 export class Container extends React.Component {}
 export default class App<P = {}> extends React.Component<P & DefaultAppIProps & AppProps> {
diff --git a/types/next/document.d.ts b/types/next/document.d.ts
index febd36eb4a..b76ed7b2b0 100644
--- a/types/next/document.d.ts
+++ b/types/next/document.d.ts
@@ -88,11 +88,12 @@ export interface NextScriptProps {
  * Document component type. Differs from the default type because the context it passes
  * to getInitialProps and the props is passes to the component are different.
  *
+ * @template P Component props.
  * @template IP Initial props returned from getInitialProps.
  * @template C Context passed to getInitialProps.
  */
-export type DocumentComponentType<IP = {}, C = NextDocumentContext> = NextComponentType<
-    IP & DocumentProps,
+export type DocumentComponentType<P = {}, IP = P, C = NextDocumentContext> = NextComponentType<
+    P & DocumentProps,
     IP,
     C
 >;
diff --git a/types/next/test/next-app-tests.tsx b/types/next/test/next-app-tests.tsx
index 8cf3e30655..ee7b4fffdc 100644
--- a/types/next/test/next-app-tests.tsx
+++ b/types/next/test/next-app-tests.tsx
@@ -2,8 +2,8 @@ import * as React from "react";
 import App, { Container, NextAppContext, AppProps, AppComponentType } from "next/app";
 import { DefaultQuery } from "next/router";
 
-interface NextComponentProps {
-    example: string;
+interface TestAppProps {
+    pageProps: any;
 }
 
 interface TypedQuery extends DefaultQuery {
@@ -21,10 +21,10 @@ class TestApp extends App {
     }
 }
 
-class TestAppWithProps extends App<NextComponentProps> {
+class TestAppWithProps extends App<TestAppProps & WithExampleProps> {
     static async getInitialProps({ Component, router, ctx }: NextAppContext) {
         const pageProps = Component.getInitialProps && (await Component.getInitialProps(ctx));
-        return { pageProps, example: "foobar" };
+        return { pageProps };
     }
 
     render() {
@@ -56,7 +56,7 @@ interface TestProps {
 
 // Stateful HOC that adds props to wrapped component. Similar to what withRedux does.
 // tslint:disable-next-line no-unnecessary-generics
-const withExample = <P extends {}>(App: AppComponentType<P & WithExampleProps>) =>
+const withExample = <P extends {}>(App: AppComponentType<P & WithExampleProps, P>) =>
     class extends React.Component<P & AppProps & WithExampleHocProps> {
         test: string;
 
@@ -79,7 +79,7 @@ const withExample = <P extends {}>(App: AppComponentType<P & WithExampleProps>)
 
 // Basic stateless HOC. Similar to what withAuth would do.
 // tslint:disable-next-line no-unnecessary-generics
-const withBasic = <P extends {}, C extends {}>(App: AppComponentType<P, C>) =>
+const withBasic = <P extends {}, C extends {}>(App: AppComponentType<P, P, C>) =>
     class extends React.Component<P & AppProps> {
         static async getInitialProps(context: C) {
             const pageProps = App.getInitialProps && (await App.getInitialProps(context));