[Next.js] Next.js + TypeScript + Tailwind CSS 초기세팅

 

 

Next.js는 React 라이브러리를 포함하고 있는 React의 프레임워크이다. React에 프레임워크가 왜 필요할까? 이 차이를 이해하려면 CSR과 SSR의 차이를 이해해야 한다.

 

 

CSR vs SSR

 

 

CSR(Client Side Rendering) : 서버가 클라이언트에게 HTML과 JS파일을 보내주고 클라이언트가 렌더링을 한다.
SSR(Server Side Rendering) : 서버에서 HTML의 렌더링 준비를 마친다.

 

 

CSR은 SPA의 렌더링 방식으로 React에서 채택하여 사용하고 있다. CSR은 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링하는 방식이다. 클라이언트에서 요청이 오면 서버는 완성된 HTML을 보내주는 게 아닌 스크립트 링크가 걸린 HTML파일을 응답으로 보내준다. 이후 클라이언트는 자바스크립트를 다운받고 실행하며 화면에 DOM을 그려준다. 결론은 클라이언트가 렌더링을 하는 것이다.

 

 

SSR과 비교한 CSR의 장점은 다음과 같다.

• 사용자의 요청에 따라 필요한 부분만 응답하기 때문에 SSR대비 빠른 상호작용이 가능함.
• SPA사용으로 자연스러운 사용자 경험을 제공할 수 있음.
• 초기에 파일을 한 번에 받아오기 때문에 서버의 부하를 덜어줄 수 있음.
• 컴포넌트별 개발을 용이하게 만들어줌.

 

 

SSR은 서버에서 유저에게 보여줄 페이지를 모두 구성하여 유저에게 보여주는 방식이다. 클라이언트에게 서버에서 렌더링을 마치고 보내주기 때문에  Server에서 렌더링을 한다는 것이다. 이미 렌더링을 해서 보내주기 때문에, 클라이언트가 처음으로 HTML을 받아왔을 때, 빈화면이 보이지 않는다.

 

 

CRS과 비교한 SSR의 장점은 다음과 같다.

• 서버를 이용해 페이지를 구성하기 때문에 빠른 초기 응답을 경험할 수 있음.
• 완성된 HTML을 받기에 SEO적용에 용이함.
• app의 규모가 커졌을 때, 초기로딩이 상대적으로 CRS보다 빠름.

 

 

Next.js 소개

 

 

앞서 말했듯이 React는 SPA의 렌더링 방식을 채택하고 있다. 이는 초기에 받은 HTML은 비어있으므로 SEO에 취약하므로 렌더링 된 HTML을 받아오는 방식이 SSR을 이용하는 Next.js이다. Next.js에서는 SPA의 장점을 유지할 수 있다. 첫 페이지를 SSR방식으로 처리한 후 다른 페이지는 CSR 방식으로 브라우저에게 처리하기 때문에, SSR의 장점과 CSR의 장점을 모두 사용할 수 있다. SSR의 장점과 CSR의 장점 모두 포함하고 있기 때문에 Next.js를 사용하지 않을 이유가 없다.

 

 

Next.js에서는 라우터를 정의하기 위한 코드가 필요없다. 파일을 기반으로 라우팅을 지원하기 때문이다. 또한, Next.js에서 React코드에 쉽게 백엔드 코드를 추가할 수 있다. 또한 아래의 여러 기능들을 제공한다.

• 타입스크립트 기본 지원
• 이미지 최적화
• 성능 분석
• 자동 폴리필(Polyfill) 적용
• 웹 어플리케이션 국제화 지원

 

 

웹 프레임웨크 선호도 조사

 

 

2021년 선호 웹 프레임워크 조사에서는 Next.js가 포함되어 있지 않았다. 2022년 선호 웹 프레임워크 조사에서 Next.js가 포함됨과 동시에 높은 순위에 올라와있다.

2022 스택오버플로우 웹 프레임워크 선호도 순위

 

 

SSR

 

 

No Pre-rendering 방식은 HTML 빈 파일을 초기에 받기 때문에 초기 로딩이 늦고 SEO에서도 낮은 점수를 받는다. 위 방식과 같이 Pre-rendering방식으로 HTML을 빠르게 사용자에게 보여줄 수 있고, 이후에 JS를 로딩하기 때문에 SEO에서 높은 점수를 받는다.

 

 

직관적인 Auto Routing

 

 

React에서는 Route.js파일로 Route를 관리해줘야 했다.

<Route path="/" element={<Main />} />
<Route path="/cart" element={<Cart />} />
<Route path="/myPage" element={<MyPage />} />
<Route path="/order-info" element={<OrderInfo />} />
<Route path="/paid" element={<Paid />} />
<Route path="/payment" element={<Payment />} />
<Route path="/product-detail" element={<ProductDetail />} />
<Route path="/product-list" element={<ProductList />} />

Next.js에서는 자동으로 라우터를 구성하기 때문에, 라우팅 코드가 없다. 파일명의 규칙은 소문자로 시작해야 된다. 다른 라우팅 규칙들은 https://nextjs.org/learn/basics/navigate-between-pages/pages-in-nextjs 에서 자세히 볼 수 있다.

 

 

초기세팅

 

 

이번 초기세팅은 개인적으로 Tailwind CSS를 사용해보고 싶어서 같이 세팅을 할 것이다. Tailwind CSS는 별도의 CSS 파일 없이, 클래스명 없이 빠르게 CSS를 작성할 수 있다. 쉽게 말해 HTML태그에 클래스명이 이미 정해져 있고, CSS만 작성하면 된다는 것이다.

Next.js 홈페이지에서 다음과 같은 명령어로 Next.js와 TypeScript를 설치할 수 있다.

 

 

npx create-next-app@latest --ts

프로젝트 이름을 적어주면 된다.

 

ESLint를 사용할거면 YES!

 

Tailwind CSS를 선택적으로 사용할 수 있다. YES로 설치해보자.

 

src디렉토리를 사용하여 Public과 분리시키는 편이면 YES.

 

App Router는 Next.js에서 page폴더를 통한 라우터방법을 사용하지 않고 라우팅을 할 수 있도록 만든 기술이다. 자세한 사항은 https://nextjs.org/docs/app에서 확인해보자.

 

import 경로를 커스터마이징할 수 있다.

 

default로 @/*를 커스터마이징된 경로로 사용할 것인가? YES

 

이후 설치하면 완료된다.