first commit

Author: username

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.env

@@ -0,0 +1,41 @@
+### https://raw.github.com/github/gitignore/656f766bfc75f912d611a973158be0fe9e2ba2f2/Node.gitignore
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+
+## Application
+.next
+.now

.gitignore

@@ -0,0 +1,5 @@
+{
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "semi": false
+}

.prettierrc

@@ -0,0 +1,40 @@
+{
+  "files.exclude": {
+    "**/.DS_Store": true,
+    "**/node_modules": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    ".next": true
+  },
+  "files.insertFinalNewline": true,
+  "javascript.format.enable": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.tslint": true
+  },
+  "[javascript]": {
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true,
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": true
+    }
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true,
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": true
+    }
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true,
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": true
+    }
+  },
+  "[jsonc]": {
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true
+  }
+}

.vscode/settings.json

@@ -0,0 +1,66 @@
+# typescript-nextjs-redux-toolkit-material-ui-example
+
+This is a sample for `server-side rendering` using `TypeScript` , `Next.js` , `Redux Toolkit` , and `Material-UI` .
+
+`VSCode` , `prettier` and `TSLint` provide real-time formatting, syntax checking and organizing of unused imports.
+
+これは、 `TypeScript` , `Next.js` , `Redux Toolkit` , `Material-UI` を使った `サーバーサイドレンダリング` に対応したサンプルです。
+
+`VSCode` と `prettier` と `TSLint` によって、リアルタイムに整形と構文チェックと未使用 import の整理が行われます。
+
+## Live demo
+
+[live demo](https://typescript-nextjs-redux-toolkit-material-ui-example.now.sh/)
+
+## Features
+
+- [Visual Studio Code](https://code.visualstudio.com/)
+- [Typescript](https://www.typescriptlang.org/)
+- [Next.js](https://nextjs.org/)
+- [Material-UI](https://material-ui.com/)
+- [Redux](https://redux.js.org/)
+- [Redux Toolkit](https://redux-toolkit.js.org/)
+- [TSLint](https://palantir.github.io/tslint/)
+
+## Requirement
+
+- [Google Chrome](https://www.google.com/intl/ja_ALL/chrome/)
+- [Visual Studio Code](https://code.visualstudio.com/)
+- TypeScript v3.7 or higher( [require Optional Chaining](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining) )
+
+## Install Google Chrome addon
+
+- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ja)
+
+## Recommended VSCode addons
+
+- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint)
+
+## Usage
+
+### Download and install
+
+```bash
+git clone https://github.com/treetips/typescript-nextjs-redux-toolkit-material-ui-example.git
+cd typescript-nextjs-redux-toolkit-material-ui-example
+npm i
+```
+
+### Start local
+
+```bash
+npm run dev
+```
+
+### Build and start production express server
+
+```bash
+npm run build
+npm start
+```
+
+## Related repository
+
+* [typescript-nextjs-redux-material-ui-example](https://github.com/treetips/typescript-nextjs-redux-material-ui-example)

README.md

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

components/AppContext.ts

@@ -0,0 +1,22 @@
+import green from "@material-ui/core/colors/green"
+import grey from "@material-ui/core/colors/grey"
+import { createMuiTheme } from "@material-ui/core/styles"
+
+/**
+ * material-ui theme color pallete
+ * @see https://material-ui.com/style/color/
+ */
+export const MuiTheme = createMuiTheme({
+  palette: {
+    primary: {
+      light: grey[700],
+      main: grey[800],
+      dark: grey[900],
+    },
+    secondary: {
+      light: green[300],
+      main: green[500],
+      dark: green[700],
+    },
+  },
+})

components/MuiTheme.ts

@@ -0,0 +1,36 @@
+import { Paper } from "@material-ui/core"
+import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"
+
+const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
+  createStyles({
+    root: (props: Props) => ({
+      padding: props.noPadding === true ? theme.spacing(0) : theme.spacing(2),
+      marginBottom: theme.spacing(2),
+    }),
+  })
+)
+
+type Props = {
+  /**
+   * shildren
+   */
+  children: React.ReactNode
+  /**
+   * zero-padding flag
+   */
+  noPadding?: boolean
+}
+
+/**
+ * Paper with spacing
+ * @param props IProps
+ */
+export const SpacingPaper = (props: Props) => {
+  const { children } = props
+  const classes = useStyles(props)
+  return (
+    <Paper className={classes.root} elevation={6}>
+      {children}
+    </Paper>
+  )
+}

components/atoms/SpacingPaper.tsx

@@ -0,0 +1 @@
+export * from "./SpacingPaper"