Next.js 개발 환경 세팅

 

새로운 프로젝트를 진행하게되었다!

어떤 프로젝트를 해볼까 고민해보다가 결국 cookcat 클론코딩으로 정했다👏🏼

 

이번 프로젝트로 팀원들과 타입스크립트, Next.js, PWA를 새롭게 공부해보기로해서,

클론코딩 사이트는 비교적 덜! 복잡한(???) 사이트로 선택하였다. (그렇게 앞날을 예상하지 못한 우리들..😅)

 

내일 첫번째 미팅 전 오늘 공부해본 내용들을 정리해보려한다.

---

Next.js

이번엔 개별환경으로 Next.js로 선택하였다. Next.js는 리액트 전용 서버사이드 프레임워크이다.

이전 프로젝트때는 개별환경으로 CRA(create-react-app)을 사용하였었는데, 어떤 차이가있을까?

가장 큰 차이점은 아무래도 CRA는 CSR이고 Next.js는 SSR인 점일 것이다.

 

CSR의 장점도 많지만 우린 이번 프로젝트에서 SSR을 사용할테니 CSR의 단점을 잠깐 집고넘어가자면,

• 사용자가 첫 화면을 보기까지 로딩시간이 오래걸린다.
• SEO가 잘 안된다.

그렇다면 SSR을 사용하려는 이유가 뭘까?

SSR = Server Side Rendering

서버에서 렌더링 작업을 하는 것을 SSR의 장점은?

• 첫 번째 페이지 로딩이 빠르다.
• 모든 컨텐츠가 html에 담겨져있으니 조금 더 효율적인 SEO가능

하지만 SSR도 단점이 있겠지?

• 페이지 이동 시 전체적인 웹사이트를 다시 서버에서 받아와야하기때문에 blinking issue가 잦다.
• 서버 과부화가 흔히 발생한다.
• 반응이 느릴 수 있다.

>> Next.js를 사용하면 다른 설정없이 SSR구현이 가능하다!

Next.js의 핵심기능

1. 일반적인 리액트 SPA에선 모든 컴포넌트를 초기렌더링때 한번에 내려받기때문에 프로젝트 규모가 커질수록 로딩속도가 느려질 수 있다. Next는 이를 방지할수있도록 필요에따라 파일을 불러올 수 있는 코드 스플리팅이 가능하다.
2. pages폴더는 라우터 기능을한다. 따라서 라우트 설정이 따로 필요없다.

 

이외에도 Next.js에대해 틈틈히 깊게 공부해 볼 생각이다. 

참고 블로그

[번역] The Next.js 핸드북

 

Next.js 초기 세팅하기

초기 환경 세팅은 여러 블로그들을 따라 간단하게 할 수 있다.

 

1. 프로젝트 폴더에 파일 생성

npx create-next-app

프로젝트 이름에 대문자는 안된다고한다. 소문자로 빠르게 수정🙄

오호 완료✨

 

2. Next.js 수동설치

yarn add next react react-dom

Next, react, react-dom을 설치해준다.

pacakge.json의 scripts도 잘 추가되어있다.

 

yarn dev

개발 스타투!