(Next.js) create next-app으로 Next.js 시작하기 (with TypeScript)

Next.js

 

Next.js란 보통 SPA로서 CSR 방식으로 작동하는 React를 SSR 방식으로 쉽게 구현할 수 있도록 도와주는 프레임워크입니다.

Next.js를 사용하지 않고도 SSR 방식으로 렌더링을 구현할 수 있지만 Next.js를 이용하여 쉽고 간편하게 서버 사이드 렌더링을 제공할 수 있습니다.

 

서버 사이드 렌더링은 검색엔진에 쉽게 노출될 수 있고 초기에 로딩할때 모든 데이터를 불러오지 않기 때문에 성능이 개선됩니다.

서버 사이드 렌더링과 코드 스플리팅이 필요없는 어드민 페이지 같은 경우는 굳이 Next.js를 사용하지 않아도 되지만

보통의 경우, 사용자가 이용에 있어서 불편함을 개선시키기 위해 Next.js를 사용하는것을 긍정적으로 생각해볼 수 있습니다.

 

저번에는 npm init으로 직접 시작하고 npm install next 로 처음부터 시작해봤었는데 이번에는

공식문서에서 제공하는 create next-app을 이용하여 시작해보려고 합니다.

 

npm init next-app 프로젝트 이름 // npm
yarn create next-app 프로젝트 이름 // yarn

 

저는 yarn create next-app 으로 시작했습니다.

 

 

프로젝트가 잘 만들어졌네요.

이제 npm run dev 로 실행시켜보겠습니다.

---

---

create next app은 기본 리액트가 이미 설치되어져 있기 때문에 따로 설치해줄 필요는 없고

타입스크립트와 타입스크립트 리액트를 설치해주겠습니다.

우선 루트폴더에 next-env.d.ts 파일을 하나 만들어주고

터미널에서 타입스크립트를 설치해줍니다.

 

npm install -D typescript @types/react @types/node // npm
yarn add -D typescript @types/react @types/node // yarn

 

타입스크립트를 설치해준 후에 컴포넌트들의 확장자를 tsx로 수정, 타입스크립트를 사용한 후에

npm dev run을 다시 실행시켜주니까 tsconfig.json 파일을 알아서 생성해줍니다.

 

끝으로 개발환경에서 필요한 eslint 패키지들을 설치하겠습니다.

 

npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser // npm
yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser // yarn

npm install -D eslint-plugin-import // npm
yarn add -D eslint-plugin-import // yarn

npm install -D eslint-plugin-react eslint-plugin-react-hooks // npm
yarn add -D eslint-plugin-react eslint-plugin-react-hooks // yarn

 

설치 후에 eslint --init 명령어를 입력해주시거나 직접 .eslintrc 파일을 만들어주고

기본적인 설정들을 작성해주었습니다.

 

// .eslintrc 파일
{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": ["import", "react", "react-hooks", "@typescript-eslint"],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off"
  }
}

ㅅ 이후로는 필요한 필요한 eslint 규칙들이 생긴다면 추가해주면 될 것 같습니다.