Merge pull request #9 from treetips/feature/ctx_type

Change ctx type from any to custom type

Author: treetips

components/AppContext.ts

@@ -0,0 +1,10 @@
+import { NextDocumentContext } from "next/document"
+import { Store } from "redux"
+
+/**
+ * NextDocumentContext with redux store context
+ * @tree
+ */
+export type AppContext = NextDocumentContext & {
+  readonly store: Store
+}

pages/_document.tsx

@@ -1,9 +1,10 @@
-import { ServerStyleSheets } from "@material-ui/styles"
-import Document, { Head, Main, NextScript } from "next/document"
-import React from "react"
-import flush from "styled-jsx/server"
-import { MuiTheme } from "../components/MuiTheme"
-import "../styles/main.css"
+import { ServerStyleSheets } from "@material-ui/styles";
+import Document, { Head, Main, NextScript } from "next/document";
+import React from "react";
+import flush from "styled-jsx/server";
+import { AppContext } from "../components/AppContext";
+import { MuiTheme } from "../components/MuiTheme";
+import "../styles/main.css";
 
 interface IProps {
   pageProps: any
@@ -13,7 +14,7 @@ interface IProps {
  * @see https://github.com/mui-org/material-ui/blob/master/examples/nextjs-with-typescript/pages/_document.tsx
  */
 class MyDocument extends Document<IProps> {
-  static getInitialProps = async ctx => {
+  static getInitialProps = async (ctx: AppContext) => {
     // Render app and page and get the context of the page with collected side effects.
     const sheets = new ServerStyleSheets()
 

pages/about.tsx

@@ -1,6 +1,7 @@
 import { Typography } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React from "react"
+import { AppContext } from "../components/AppContext"
 import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
@@ -29,7 +30,7 @@ function About() {
 /**
  * Server side rendering
  */
-About.getInitialProps = async ctx => {
+About.getInitialProps = async (ctx: AppContext) => {
   const pagePayload: IPagePayload = {
     selectedPage: Page.ABOUT,
   }

pages/redux.tsx

@@ -8,6 +8,7 @@ import {
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 import React, { useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
+import { AppContext } from "../components/AppContext"
 import { SpacingPaper } from "../components/atoms"
 import { HeaderArticleContainer } from "../components/organisms"
 import { Layout } from "../components/templates"
@@ -121,7 +122,7 @@ function Redux() {
 /**
  * Server side rendering
  */
-Redux.getInitialProps = async ctx => {
+Redux.getInitialProps = async (ctx: AppContext) => {
   const pagePayload: IPagePayload = {
     selectedPage: Page.REDUX,
   }