(Next.js) Next.js 시작하기 (with TypeScript)

Next.js

 

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

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

 

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

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

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

 

시작하기 위해 node.js 가 필요한데 저는 이미 설치되어 있어서

바로 터미널에서 npm init으로 시작했습니다.

 

npm init

 

 

다음으로 이름과 버전 등을 설정해주니까 해당 폴더에 package.json 파일이 만들어 졌습니다.

그 후 npm install next 를 입력하여 next를 설치해줬습니다.

 

npm install next // npm
yarn add next // yarn

 

package.json

next를 설치해주니까 package.json 파일에 dependencies에 next가 추가되었습니다.

해당 파일에서 test 부분을 dev로 바꾸어주고 값은 next로 해줍니다.

 

"dev": "next"로 수정

 

npm install react react-dom // npm
yarn add react react-dom // yarn

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

리액트를 사용하기 위해 리액트도 당연하게 추가해주고 저는 타입스크립트와 함께 사용하고 싶어서 타입스크립트도 설치해주었습니다.

 

npm run dev

이제 npm run dev를 통하여 실행해보겠습니다.

---

http://localhost:3000/

---

잘 실행되었습니다.

타입스크립트를 추가해준 후에 실행하니까 알아서 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 규칙들이 생긴다면 추가해주면 될 것 같습니다.