Next + Typescript (1) tsconfig setting

@zeit/next-typescript를 사용하는 방법은 deprecated되었습니다.

 

공식문서 : nextjs.org/docs/basic-features/typescript

Next Example도 참고합시다 : github.com/vercel/next.js/tree/canary/examples/with-typescript

 

우선 Next 프로젝트를 생성한 후 tsconfig.json을 생성한 뒤 실행시켜보려고하면...

 

때문에 해당 패키지들을 설치한 후 확장자를 tsx 꼴로 지정하시면 타입스크립트를 사용하실 수 있습니다.

주의하실점이, js였을 때는 확장자를 jsx로 하지 않아도 오류가 나지는 않았지만 ts를 사용하시게 된다면 확장자가 ts면 오류가 납니다.

 

우선, tsc --init으로 tsconfig를 생성하고, 실행하면 아래와 같은 문구가 뜹니다.

 

The following suggested values were added to your tsconfig.json.

These values can be changed to fit your project's needs:

 

- skipLibCheck was set to true

- strict was set to false

- noEmit was set to true

- include was set to ['next-env.d.ts', '**/*.ts', '**/*.tsx']

- exclude was set to ['node_modules']

 

The following mandatory changes were made to your tsconfig.json:

 

- resolveJsonModule was set to true (to match webpack resolution)

- isolatedModules was set to true (requirement for babel)

- jsx was set to preserve (next.js implements its own optimized jsx transform)

 

 

제 tsconfig.json은 아래와 같이 되었네요.

{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5", /* 컴파일 결과의 ECMAScript 버전. Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "ESNext", /* 모듈 코드 생성시에 어떤 버전으로 생성할지 Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": [
      "ES2017",
      "ES2018",
      "ESNext",
      "DOM",
      "DOM.Iterable",
      "ScriptHost",
      "ES2015.Core",
      "ES2015.Promise",
      "ES2016.Array.Include",
      "ES2017.object",
      "ES2017.String",
      "ES2017.TypedArrays",
      "ES2018.Promise",
      "ES2018.RegExp",
      "ESNext.AsyncIterable",
      "ESNext.Array"
    ], /* Specify library files to be included in the compilation. */
    "allowJs": true, /* Allow javascript files to be compiled. js도 사용할 수 있도록 허용 */
    "checkJs": true, /* js 파일에 있는 오류도 보고할 것. allowJs를 켜놔야 의미있는 설정 Report errors in .js files. */
    "jsx": "preserve", /* Next는 react가 아니라 preserve로 두어야 합니다. next.js implements its own optimized jsx transform 라고 하네요. Specify JSX code generation: "preserve", 'react-native', or 'react'. */// "declaration": true,                   /* d.ts 정의 파일을 생성하고 싶다면 Generates corresponding '.d.ts' file. */
    // "declarationMap": true,                /* d.ts 정의 파일의 소스맵 생성하고 싶다면 Generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourceMap": true,                     /* 소스맵 파일을 만들고 싶으면 킬 것. Generates corresponding '.map' file. */
    // "outFile": "./",                       /* Concatenate and emit output to single file. */
    // "outDir": "./",                        /* Redirect output structure to the directory. */
    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    // "composite": true,                     /* Enable project compilation */
    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
    // "removeComments": true,                /* Do not emit comments to output. */
    "noEmit": true, /* 출력물을 내보내지 않습니다. Do not emit outputs. */// "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    "downlevelIteration": true,            /* 'for-of', 'spread', 'destructuring'와 제너레이터, 그러니까 function* {}, yeild 같은거 쓰시려면 켜야 합니다. Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
    "isolatedModules": true, /* 추가 검사를 수행하여 별도의 컴파일 (예를 들어 트랜스파일된 모듈 혹은 @babel/plugin-transform-typescript) 이 안전한지 확인합니다. Transpile each file as a separate module (similar to 'ts.transpileModule'). *//* Strict Type-Checking Options strict 모드는 원하는 정도로 */
    // "strict": true,                           /* Enable all strict type-checking options. */
    "noImplicitAny": false, /* Raise error on expressions and declarations with an implied 'any' type. */// "strictNullChecks": true,              /* Enable strict null checks. */
    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
    /* Additional Checks */
    // "noUnusedLocals": true,                /* Report errors on unused locals. */
    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
    "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. swtich 문에서 fallthrough가 발생하면 경고 내기 *//* Module Resolution Options */
    "moduleResolution": "node", /* 모듈 (검색)해석 방식 설정 Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "baseUrl": ".",                       /* Base directory to resolve non-absolute module names. */
    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
    // "typeRoots": [],                       /* List of folders to include type definitions from. */
    // "types": [],                           /* Type declaration files to be included in compilation. */
    "allowSyntheticDefaultImports": true, /* json을 import할 수 있도록 만들어 줍니다. Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true, /* esmodule 편리하게 사용하기 위함. import/export 구문.  Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */// "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
    /* Source Map Options */
    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
    /* Experimental Options decoration 쓰려면 true로 켜면 된다. 여기서는 안하기로. */
    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
    /* Advanced Options */
    "forceConsistentCasingInFileNames": true /* 파일 참조시 대소문자를 철저하게 구별함 Disallow inconsistently-cased references to the same file. */,
    "skipLibCheck": true,
    "strict": false,
    "resolveJsonModule": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

 

 

 

만약 배포를 vecel로 하려면 target을 serverless로 둬야 합니다.

자세한 건 아래 포스트 참고.

flamingotiger.github.io/frontend/react/next-typescript/

Nextjs 에서 typescript 적용하기

 

 

next-env.d.ts

 

앱을 구동시키면 next-env.d.ts가 생성된 것을 볼 수 있다.

 

A file named next-env.d.ts will be created in the root of your project. This file ensures Next.js types are picked up by the TypeScript compiler. You cannot remove it, however, you can edit it (but you don't need to).

 

By default, Next.js will do type checking as part of next build. We recommend using code editor type checking during development.

 

 

+ eslint

 

마음대로 구성하면 되긴 하는데 아래 글이 제일 잘 정리한 듯

 

velog.io/@mayinjanuary/Next.js-%EC%84%B8%ED%8C%85%ED%95%98%EA%B8%B0-ESLint-Prettier-%EC%84%A4%EC%A0%95