[NextJs ]1. React + Typescript +nextJs 적용 법 create-next-app

프론트엔드 개발을 하면서 빠르게 개발하고 쉽게 유지 보수를 하기 위해서 여러가지 방법을 사용하다가 타입스크립트 / 리액트 /  NextJs를 사용하는 경우가 많아 졌고 기존에 create-react-app에서 create-next-app 을 사용 해 볼 기회도 많아지고 여러가지 프로젝트를 하면서 정리의 필요성을 느꼈습니다. 일주일만에 빠르게 사이트를 개발 할때 정말 빠르게 개발을 할 수 있습니다. 

 

nextJs같은경우 최근에 버전업을 해서 사용법도 조금 달라진부분이 있어서 2021년 1월 최신버전을 사용해 보려고 합니다.

 

NextJs - create-next-app 적용 방법

yarn global add create-next-app // create-next-app 글로벌 추가
create-next-app project-name
cd project-name
yarn dev // localhost:3000 확인
yarn build // 프로젝트 build
yarn start // build 프로젝트 확인 localhost:3000

localhost 화면

해당 화면과 같이 뜬다면 성공입니다. 

 

NextJs - typescript 적용하기

한번에 명령어를 통해 --typescript template를 추가하는 방법도 있지만 저는 에러가 나서 우선 js파일로 적용 해두고 파일을 추가합니다. 

 

1. 메인 로컬에 next-env.d.ts 파일을 직접 만들어서 추가합니다. 

2.아래  명령어 입력해 주세요.  

yarn add --dev typescript @types/react @types/node

3.메일 로컬에 tsconfig.json파일 추가합니다. 

4.해당 내용을 넣어주세요. 

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "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/*"]
  }
},
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

5. 마지막으로 pages/ 폴더 내부에 

index.js / _app.js 파일을 

index.tsx / _app.tsx 파일로 변경해주세요. 

 

이렇게 바꾸시고 다시 

6. 명령어 실행으로 테스트 해보시면 됩니다. 

yarn dev

 

 

앞으로 블로그 정리 계획

- eslint /prettier 적응하기

- nextJs - styled-components 적용

- nextJs router 사용기

- nextJs counter 제작 

- nextJs api 가상으로 만들고 사용  

- nextJs api 가져오기

- nextJs redux / redux- saga 적용

- nextJs github 올리기 

- nextJs vercel 배포 

- nextJs 가상 로그인 만들기