1. yarn init --yes
    yarn add next react react-dom
    yarn add @zeit/next-typescript @types/next @types/react @zeit/next-typescript @types/next @types/react
  2. // next.config.js
    const withTypescript = require('@zeit/next-typescript')
    module.exports = withTypescript()
  3. // babelrc
    {
    "presets": ["next/babel", "@zeit/next-typescript/babel"]
    }
  4. //tsconfig
    {
    "compilerOptions": {
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
     "jsx": "preserve",
     "lib": ["dom", "es2017"],
     "module": "esnext",
     "moduleResolution": "node",
     "noEmit": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "preserveConstEnums": true,
     "removeComments": false,
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
     "target": "esnext"
    }
    }
  5. eslint setting

    npm i eslint -D
    npm i @typescript-eslint/parser -D
    npm i @typescript-eslint/eslint-plugin -D
    npx eslint --init
  6. //.eslinrc.js
    module.exports = {
     "env": {
         "browser": true,
         "es6": true,
         "node": true
     },
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended"
     ],
     "globals": {
         "Atomics": "readonly",
         "SharedArrayBuffer": "readonly"
     },
     "parserOptions": {
         project: './tsconfig.json',   //추가
         "ecmaFeatures": {
             "jsx": true
         },
         "ecmaVersion": 2018,
         "sourceType": "module"
     },
     "plugins": [
         "react"
     ],
     "rules": {}
    };
  7. package.json 추가
    "scripts": {
     "dev": "next",
     "build": "next build",
     "start": "next start"
    }
  8. // pages/index.tsx 추가
    import React from "react";
    export default () => {
    return <div>hello</div>;
    };
    yarn add --dev typescript @types/node