Next.js x Typescript로 빨리 개발 환경을 정돈하십시오

이게 뭐야?

Next.js x Typescript로 개발 환경을 만들었으므로 비망록으로 설명했습니다.

제작물

도입 절차

1. 프로젝트 만들기

쉘

npx create-next-app --ts $プロジェクト名

--typescript or --ts 에서 typescript 용으로 작성됨
이런 화면이 나오면 ok입니다.

그 밖에도 옵션이 있어 firebase나 framer-motion을 디폴트로 넣을 수 있기 때문에 여러가지 시험해 보자

2. 실행해보기

위의 이미지에 따라 실행해 봅니다.

소스 코드도 .ts or .tsx

3. Lint 주위를 정돈한다

여기에서 돛대가 아니라 넣어두면 조금 편리하다고 하는 기능의 소개가 됩니다
htps // // 네 xtjs. 오 rg / 두 cs / 바시 c 훗 아츠레 s / 에 s ぃ t
공식 문서에도 쓰여졌지만 Next.js는 11.0.0부터 lint 명령이 추가되었습니다.

By default, Next.js will run ESLint for all files in the pages/, components/, and lib/directories. However, you can specify which directories using the dirs option in the eslint config in next.config.js for production builds:

디폴트로 체크해 주는 것은 pages/,components/,lib/의 3개와 같습니다
이번에는 기본적으로 들어있는 eslint 외에도 prettier도 도입합니다.

$ npm install -D prettier eslint-config-prettier

위가 완료되면
다음 파일을 변경합니다.

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "prettier"]
}

아래의 prettier 규칙을 포함하는 파일 만들기

.prettierrc.js

module.exports = {
  singleQuote: false,
};

완료되면 package.json scripts에 다음을 추가하여 실행할 수 있도록

{
//~~省略~~
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json,css}'"
  },
//~~省略~~
}

실행

$ npm run format

결과를 살펴보면 .prettierrc.js

소감

이번에는 프로젝트 개발의 첫걸음을 기사로 써 보았습니다.
특히 3은 여러 사람이 개발할 때 가독성을 낮추지 않고 진행되기 때문에 추천합니다
Let's enjoy coding life!