## 처음부터 설치한다면


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

## with-typescript

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

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

### .babelrc

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

### next.config.js

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

### tscofig.json

```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"
    ]
  }
}
```

### package.json

```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"
  }
}

```


## with styled-components

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

### _document.tsx

### _app.tsx

## with mobx

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

```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
```

## 링크

- https://github.com/deptno/next.js-typescript-starter-kit