SookDev

Next.js 에서 Typescript 적용하기

install

yarn create next-app —typescript

tsconfig.json

touch tsconfig.json

실행

yarn dev

모든 준비과정 후 js 파일 대신 tsx, ts 사용 가능

next-env.d.ts

next.js 에서 타입스크립트를 사용한다면 다음의 파일은 반드시 있어야 하며 변경 되어도 안된다.

만약 변경이 필요하다면 additional.d.ts 에 변경될 타입을 추가하도록 한다.


/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

tsconfig




{
	"compilerOptions": {
		"target": "es5",
		"lib": ["dom", "dom.iterable", "esnext"],
		"types": ["react/next", "react-dom/next"],
		"allowJs": true,
		"skipLibCheck": true,
		"strict": false,
		"forceConsistentCasingInFileNames": true,
		"noEmit": true,
		"esModuleInterop": true,
		"module": "esnext",
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"baseUrl": ".",
		"paths": {
			"@src/*": ["./src/*"],
			"@styles/*": ["./src/styles/*"]
		}
	},
	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
	"exclude": ["node_modules"]
}

next.config.js


// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require("path");

module.exports = {
	sassOptions: {
		includePaths: [path.join(__dirname, "src", "styles")],
	},
	eslint: {
		ignoreDuringBuilds: true,
	},
	images: {
		domains: [
			"user-images.githubusercontent.com",
			"images.unsplash.com",
			"enkorhousingdev.s3.ap-northeast-2.amazonaws.com",
			"enkor-stay.s3.ap-northeast-2.amazonaws.com",
		],
	},
	webpack(config) {
		config.module.rules.push({
			test: /\.svg$/,
			use: ["@svgr/webpack"],
		});

		return config;
	},
};

eslint


{
	"env": {
		"browser": true,
		"commonjs": true,
		"es6": true,
		"node": true
	},
	"parser": "@typescript-eslint/parser",
	"plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
	"extends": [
		"plugin:react/recommended",
		"plugin:@typescript-eslint/recommended",
		"plugin:prettier/recommended",
		"prettier"
	],
	"parserOptions": {
		"sourceType": "module",
		"ecmaVersion": 2018,
		"ecmaFeatures": {
			"jsx": true
		}
	},
	"settings": {
		"react": {
			"version": "detect"
		}
	},
	"rules": {
		"react-hooks/rules-of-hooks": "error",
		"react-hooks/exhaustive-deps": "warn",
		"import/no-unresolved": 0,
		"react/jsx-filename-extension": [
			2,
			{
				"extensions": [".js", ".jsx", ".ts", ".tsx"]
			}
		],
		"react/jsx-indent": [2, "space"],
		"react/jsx-indent-props": [2, "space"],
		"@typescript-eslint/no-inferrable-types": "off",
		"@typescript-eslint/interface-name-prefix": "off",
		"@typescript-eslint/explicit-function-return-type": "off",
		"@typescript-eslint/no-empty-function": "off"
	},
	"overrides": [
		{
			"files": ["**/*.tsx"],
			"rules": {
				"react/prop-types": "off"
			}
		}
	]
}

prettier


{
	"singleQuote": false,
	"semi": true,
	"useTabs": true,
	"tabWidth": 2,
	"trailingComma": "all",
	"printWidth": 80
}

settings.json


# Enkor Housing Front Template

<h1>코드 작성전 유의사항</h1>
<pre>
1. vscode 설치
2. vscode market에서 prettier 설치
3. vscode market에서 eslint 설치
</pre>

<h1>저장할때마다 코드 자동 prettieerc & eslintrc 적용하는 방법</h1>
<pre>
1. VS Code에서 settings.json파일을 들어간다(윈도우, 리눅스에서는 Ctrl + ,, 맥에서는 Cmd + , 를 누르고 오른쪽 위에 작은 문서 아이콘 누르면 settings.json 볼 수 있음)
2. 아래 내용을 붙여넣기
{
    // Set the default
    "editor.formatOnSave": true,
    // per-language
    "[javascript]": {
    "editor.formatOnSave": false
    },
    "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true
    }
}
</pre>

번외

SSG & SSR

서버사이드 렌더링을 위한 함수 세가지인 getStaticProps, getStaticPaths, getServerSideProps 사용 시

타입지정은 capitalize 된 이름으로 지정하면 된다.


import { GetStaticProps, GetStaticPaths, GetServerSideProps } from 'next'

export const getStaticProps: GetStaticProps = async (context) => {
  // ...
}

export const getStaticPaths: GetStaticPaths = async () => {
  // ...
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  // ...
}

Next.js + typescript 설정