OPEN

snippet.shell

$ yarn init -y
$ yarn add -D typescript @types/react @zeit/next-typescript
$ yarn add next react react-dom

https://github.com/zeit/next.js/tree/canary/examples/with-typescript

snippet.shell

yarn create next-app --example with-typescript with-typescript-app

snippet.javascript

{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ]
}

snippet.javascript

const withTypescript = require('@zeit/next-typescript')
module.exports = withTypescript()

snippet.javascript

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ]
  }
}

snippet.javascript

{
  "name": "typescript-nextjs",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@types/react": "^16.4.13",
    "typescript": "^3.0.3"
  },
  "dependencies": {
    "@zeit/next-typescript": "^1.1.0",
    "next": "^6.1.2",
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

snippet.shell

yarn add styled-componenets @material-ui/core @material-ui/icons
yarn add @types/styled-components

https://mobx.js.org/best/store.html

snippet.shell

yarn add -D babel-plugin-transform-class-properties babel-plugin-transform-decorators-legacy
yarn add mobx mobx-react
https://github.com/fdidron/mobx-next-example/blob/master/components/hoc/page.js