first commit

Author: treetips

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "next/babel",
+    "@zeit/next-typescript/babel"
+  ],
+  "plugins": [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }]
+  ]
+}

.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

.gcloudignore

@@ -0,0 +1,23 @@
+# This file specifies files that are *not* uploaded to Google Cloud Platform
+# using gcloud. It follows the same syntax as .gitignore, with the addition of
+# "#!include" directives (which insert the entries of the given .gitignore-style
+# file at that point).
+#
+# For more information, run:
+#   $ gcloud topic gcloudignore
+#
+.gcloudignore
+# If you would like to upload your .git directory, .gitignore file or files
+# from your .gitignore file, remove the corresponding line
+# below:
+.git
+.gitignore
+
+# Node.js dependencies:
+node_modules/
+.vscode/
+next.config.js
+.editorconfig
+.prettierrc
+deploy.sh
+yarn-error.log

.gitignore

@@ -0,0 +1,40 @@
+### 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
+
+
+## Next.js
+.next

.prettierrc

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

.vscode/settings.json

@@ -0,0 +1,37 @@
+{
+  "files.exclude": {
+    "**/.DS_Store": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    ".next": true
+  },
+  "files.insertFinalNewline": true,
+  "javascript.format.enable": false,
+  "prettier.tslintIntegration": 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
+  }
+}

README.md

@@ -0,0 +1,74 @@
+# typescript-nextjs-redux-material-ui-example
+
+This using typescript, next.js, redux, material-ui is simple, and is a sample corresponding to the server side rendering.
+
+By VSCode and prettier and TSLint, realtime code format and realtime sentence structure check and rearranging of unused import are carried out in real time.
+
+これは、typescript, next.js, redux, material-ui を使った、シンプルでサーバーサイドレンダリングに対応したサンプルです。
+
+VSCode と prettier と TSLint によって、リアルタイムに整形と構文チェックと未使用 import の整理が行われます。
+
+## Features
+
+- [Google App Engine Node.js Standard Environment](https://cloud.google.com/appengine/docs/standard/nodejs/)
+- [Visual Studio Code](https://code.visualstudio.com/)
+- [yarn](https://yarnpkg.com/lang/ja/)
+- [Typescript v3](https://www.typescriptlang.org/)
+- [Next.js v7](https://nextjs.org/)
+- [MATERIAL-UI v3](https://material-ui.com/)
+- [Redux](https://redux.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/)
+- [yarn](https://yarnpkg.com/lang/ja/)
+
+## 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)
+- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
+
+## Usage
+
+### Download and install
+
+```bash
+git clone https://github.com/treetips/typescript-nextjs-redux-material-ui-example.git
+cd typescript-nextjs-redux-material-ui-example
+yarn
+```
+
+### Start local
+
+```bash
+yarn dev
+```
+
+### Build and start production express server
+
+```bash
+yarn build
+yarn start
+```
+
+## For google appengine
+
+### [Optional] appengine deploy Settings
+
+```bash
+vi ./deploy.sh
+```
+
+### Deploy appengine
+
+```bash
+./deploy.sh
+```

app.yaml

@@ -0,0 +1,7 @@
+service: default
+runtime: nodejs8
+default_expiration: "1m"
+
+handlers:
+- url: /.*
+  script: server.js

components/MuiColorPalette.ts

@@ -0,0 +1,23 @@
+import green from "@material-ui/core/colors/green"
+import grey from "@material-ui/core/colors/grey"
+
+/**
+ * material-ui theme color pallete
+ * @see https://material-ui.com/style/color/
+ */
+export const palette = {
+  typography: {
+    // https://material-ui.com/style/typography/#strategies
+    useNextVariants: true,
+  },
+  primary: {
+    light: grey[700],
+    main: grey[800],
+    dark: grey[900],
+  },
+  secondary: {
+    light: green[300],
+    main: green[500],
+    dark: green[700],
+  },
+}

components/atoms/index.ts

@@ -0,0 +1,38 @@
+import {
+  createGenerateClassName,
+  createMuiTheme,
+} from "@material-ui/core/styles"
+import { SheetsRegistry } from "jss"
+import { palette } from "./MuiColorPalette"
+
+// @see https://github.com/mui-org/material-ui/blob/master/examples/nextjs/src/getPageContext.js
+
+// A theme with custom primary and secondary color.
+const theme = createMuiTheme({ palette: palette })
+
+const createPageContext = () => {
+  return {
+    theme,
+    // This is needed in order to deduplicate the injection of CSS in the page.
+    sheetsManager: new Map(),
+    // This is needed in order to inject the critical CSS.
+    sheetsRegistry: new SheetsRegistry(),
+    // The standard class name generator.
+    generateClassName: createGenerateClassName(),
+  }
+}
+
+export default function getPageContext() {
+  // Make sure to create a new context for every server-side request so that data
+  // isn't shared between connections (which would be bad).
+  if (!process.browser) {
+    return createPageContext()
+  }
+
+  // Reuse context on the client-side.
+  if (!global.__INIT_MATERIAL_UI__) {
+    global.__INIT_MATERIAL_UI__ = createPageContext()
+  }
+
+  return global.__INIT_MATERIAL_UI__
+}

components/getPageContext.ts

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

components/libs/index.ts

@@ -0,0 +1,50 @@
+import React from "react"
+import { initializeStore } from "../store"
+
+const isServer = typeof window === "undefined"
+const __NEXT_REDUX_STORE__ = "__NEXT_REDUX_STORE__"
+
+function getOrCreateStore(initialState) {
+  // Always make a new store if server, otherwise state is shared between requests
+  if (isServer) {
+    return initializeStore(initialState)
+  }
+
+  // Create store if unavailable on the client and set it on the window object
+  if (!window[__NEXT_REDUX_STORE__]) {
+    window[__NEXT_REDUX_STORE__] = initializeStore(initialState)
+  }
+  return window[__NEXT_REDUX_STORE__]
+}
+
+export default App => {
+  return class AppWithRedux extends React.Component {
+    static async getInitialProps(appContext) {
+      // Get or Create the store with `undefined` as initialState
+      // This allows you to set a custom default initialState
+      const reduxStore = getOrCreateStore()
+
+      // Provide the store to getInitialProps of pages
+      appContext.ctx.reduxStore = reduxStore
+
+      let appProps = {}
+      if (typeof App.getInitialProps === "function") {
+        appProps = await App.getInitialProps(appContext)
+      }
+
+      return {
+        ...appProps,
+        initialReduxState: reduxStore.getState(),
+      }
+    }
+
+    constructor(props) {
+      super(props)
+      this.reduxStore = getOrCreateStore(props.initialReduxState)
+    }
+
+    render() {
+      return <App {...this.props} reduxStore={this.reduxStore} />
+    }
+  }
+}