[NEXT.js] 일단 시작하기 with TypeScript

TEAM 프로젝트 시작!

 

깃헙 팀 레포지토리를 만들어준 다음, 

내가 작업할 폴더에서 git clone "주소" 해서 프로젝트 폴더를 생성하자.

그 위에 이제 next.js를 시작하면 된다.

내가 TS를 배워서 쓰는 이유는 바로 Next.js를 위해서!

NEXT.js 를 써야하는 이유는?

리액트에서 Next.js로, 넥스트JS의 특장점과 빠르게 시작하는 법 알아보기

Next.js는 현재 넷플릭스, 트위치, 틱톡, 훌루, 나이키, 우버, 엘라스틱과 같은 유명 기업에서 사용되고 있습니다. 
● 정적 사이트 생성
● 증분 정적 콘텐츠 생성
● 타입스크립트에 대한 기본 지원
● 자동 폴리필polyfill 적용
● 이미지 최적화
● 웹 애플리케이션의 국제화 지원
● 성능 분석
원본링크 : https://m.hanbit.co.kr/channel/category/category_view.html?cms_code=CMS7641364152

이러한 기능들이 있다보니, NEXT를 꼭 써봐야겠다 다짐하고 드디어 시작.

 

기초세팅 참고 블로그 

Next.js 시작하기 (typescript)

 

1. 초기세팅

npx create-next-app --ts
혹은
yarn create next-app --typescript

NEXT.js만 쓸 경우, 뒤의 ts를 생략해도 되지만 둘다 사용할 예정이므로 붙여서 사용하자.

? What is your project named? »  여기에 프로젝트명 생성

뒤에 프로젝트 이름 생성하기는 자기가 원하는 이름으로 생성하자. 나는 팀프로젝트 명을 사용했다.

단 대문자 사용이 안되니 주의

 

2. 실행해보기

# 개발자 모드
npm run dev

# 릴리즈 모드
npm run build
npm run start

 

기본

자세히 보면 맨 윗줄에 ts를 사용하고 있다는 걸 보여준다. 

 

파일구조 기본 (prettier만 새로 만든 것)

여기에 들어가면 파일별 설명 및 구조 설명을 볼 수 있다. 

Next.js + TypeScript 시작하기 2

 

 

---

이렇게 기본적인 세팅은 끝이 났다!

사실 이 외에 다른 프로젝트들을 하고 있다보니, 시간 분배를 더욱 잘해야겠다고 느낀다.

 

team레포지토리에 git push origin 해주면 끝!