Support Next.js v9

components/AppContext.ts

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

components/atoms/SpacingPaper.tsx

@@ -1,16 +1,16 @@
 import { Paper } from "@material-ui/core"
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
 
-const useStyles = makeStyles<Theme, IProps>((theme: Theme) =>
+const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
   createStyles({
-    root: (props: IProps) => ({
+    root: (props: Props) => ({
       padding: props.noPadding === true ? theme.spacing(0) : theme.spacing(2),
       marginBottom: theme.spacing(2),
     }),
   })
 )
 
-interface IProps {
+type Props = {
   /**
    * shildren
    */
@@ -25,7 +25,7 @@ interface IProps {
  * Paper with spacing
  * @param props IProps
  */
-export const SpacingPaper = (props: IProps) => {
+export const SpacingPaper = (props: Props) => {
   const { children } = props
   const classes = useStyles(props)
   return (

components/molecules/NextListItem.tsx

@@ -1,7 +1,12 @@
-import { Avatar, ListItem, ListItemAvatar, ListItemText } from "@material-ui/core";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
-import Link from "next/link";
-import React from "react";
+import {
+  Avatar,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+} from "@material-ui/core"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+import Link from "next/link"
+import React from "react"
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -21,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-interface IProps {
+type Props = {
   /**
    * <Link href="/">
    */
@@ -50,9 +55,9 @@ interface IProps {
 
 /**
  * Next.js optimized <ListItem>
- * @param props IProps
+ * @param props Props
  */
-export const NextListItem = function(props: IProps) {
+export const NextListItem = function(props: Props) {
   const { className, href, icon, primary, secondary, onClick } = props
   const classes = useStyles(props)
   const AvatorIcon = () => icon

components/molecules/PageHeader.tsx

@@ -24,13 +24,13 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-interface IProps {}
+type Props = {}
 
 /**
  * Page header component
- * @param props IProps
+ * @param props Props
  */
-export const PageHeader = function(props: IProps) {
+export const PageHeader = function(props: Props) {
   const classes = useStyles(props)
   const selectedPage = useSelector(selectedPageSelector)
   return (

components/organisms/HeaderArticleContainer.tsx

@@ -10,7 +10,7 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-interface IProps {
+type Props = {
   /**
    * children
    */
@@ -19,9 +19,9 @@ interface IProps {
 
 /**
  * Header and article container component
- * @param props IProps
+ * @param props Props
  */
-export const HeaderArticleContainer = function(props: IProps) {
+export const HeaderArticleContainer = function(props: Props) {
   const { children } = props
   const classes = useStyles(props)
   return (

components/organisms/ResponsiveDrawer.tsx

@@ -47,15 +47,15 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-interface IProps {
+type Props = {
   children: React.ReactNode
 }
 
 /**
  * Responsive drawer
  * @see https://material-ui.com/demos/drawers/#responsive-drawer
  */
-export const ResponsiveDrawer = function(props: IProps) {
+export const ResponsiveDrawer = function(props: Props) {
   const { children } = props
   const classes = useStyles(props)
   const selectedPage = useSelector(selectedPageSelector)

components/organisms/Sidenavi.tsx

@@ -44,13 +44,13 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 )
 
-interface IProps {}
+type Props = {}
 
 /**
  * Side navigation component
- * @param props IProps
+ * @param props Props
  */
-export const Sidenavi = function(props: IProps) {
+export const Sidenavi = function(props: Props) {
   const classes = useStyles(props)
   const selectedPage = useSelector(selectedPageSelector)
   const dispatch = useDispatch()

components/templates/Layout.tsx

@@ -5,24 +5,25 @@ import { useSelector } from "react-redux"
 import { selectedPageSelector } from "../../store/page"
 import { ResponsiveDrawer } from "../organisms"
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles((_: Theme) =>
   createStyles({
     root: {
       height: "100%",
     },
   })
 )
 
-interface IProps {
+type Props = {
   children: React.ReactNode
+  className?: string
 }
 
-export const Layout = function(props: IProps) {
-  const { children } = props
+export const Layout = function(props: Props) {
+  const { children, className } = props
   const classes = useStyles(props)
   const selectedPage = useSelector(selectedPageSelector)
   return (
-    <section className={classes.root}>
+    <section className={`${classes.root} ${className}`}>
       <Head>
         <title>{selectedPage.title}</title>
       </Head>

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />