왜 Next.js를 사용했나?

서론

제목 그대로 왜 내가 Next.js를 사용했나?를 고찰하는 시간을 가졌습니다.

 

"그냥 velog에 있으니깐~"

"그냥 요즘 많이들 사용한다니깐 나도~~~"

"얘가 React 프레임워크라며~ 그니깐 더 좋겠지???"

 

등등

많은 이유가 있습니다.

저도 사용하게 된 이유가 자유로운 React보다 어느정도 틀에 맞춰서 컴포넌츠 작업을 할 수 있다는 점?

그리고 단순하게 SSR 기술을 사용할 수 있다고해서?? 등 잡다한 이유를 붙일 수 있다면 너무 많습니다.

면접에서 탈락한 후 고찰을 가져보면서 우선 가장 최근에 사용한 Next.js부터 제가 많이 사용하는 redux, react, typescript등 왜? 이걸 사용했는지 작성해 보려고 합니다.

---

그래서 왜?

1. 새로운 기술스택이라서

처음 시작은 정말 그냥 새로 뜨는 기술이라 사용을 했습니다. 솔직히 "latest"의 의미가 아닌 "first seen"의 의미가 강합니다.

 

2. SSR, SSG

코딩 공부를 하면서 CSR과 SSR의 차이점과 각자의 장단점에 대해 많이 봤을겁니다.

Next.js는 SSR과 SSG의 기술로 인해 초기 로딩속도를 높일 수 있고 SEO가 쉽고 개선이 가능합니다.

사용해본 결과 기존의 CRA를 이용해서 만든 페이지에서 웹페이지에 코드를 보면 <div id="root"></div> 이렇게 보였지만 Next를 이용해서 만든 페이지를 보면 작성한 코드가 자세하게 나와있습니다.

처음에 SEO가 뭔지도 몰랐지만 이러한 웹페이지 코드를 보면 SEO가 정말 쉽구나를 느꼈습니다.

 

3. 강력한 라우터 구조

현재는 app/ 라우터구조를 추천합니다. 구조가 매우 단순합니다. 기존 CRA나 vite를 사용하면 react-router-dom을 이용하서 라우터를 구성을 이용해서 웹페이지 url의 이동이 가능했습니다.(rendering 최적화를 하며) 하지만 next에는 이러한 패키지 설치 필요없이 app라우터 안에 폴더를 구성하고 해당 폴더안에 pages라는 파일을 만들면 라우터 구조를 생성가능합니다. 이러한 기능은 자유로운 라우터 구성을 만드는 기존의 방식에 비해 어느정도 틀에 맞춰서 작성을 하기때문에 다른, 처음 보는사람의 코드를 봐도 라우터 구조를 쉽게 이해할 수 있습니다.

 

4. 클라이언트와 서버의 분리

상태관리가 필요한 페이지, 작은 규모의 컴포넌츠나 페이지간의 빠른 전환에서는 최상단에 "use client"를 작성하면 CSR로 돌아가고 그 외 나머지 서버와 연결을 해서 동작이 필요한 곳은 "use client"없이 작성을해서 분리를 할 수 있습니다. Next에서 SSR과 SSG만을 이용해서 동작하는 것이 아니라 CSR, SSR의 혼합해서 동작하는 방식입니다. 이로인해 SEO의 최적화 장점과 초기 렌더링 속도를 높일 수 있는 SSR과 페이지 간의 이동이 빠르고 상태관리를 동적으로 하는 CSR의 장점을 갖고 있습니다.

 

5. 그 외

강력한 라우터 구조도 갖고 자유로운 컴포넌츠 구성을 동시에 사용가능합니다.

API 라우트를 지원하여 서버리스 함수를 만들고 사용할 수 있습니다. 이를 통해 백엔드 로직을 간편하게 작성하고 프론트엔드와 통합할 수 있습니다.

Next.js는 자동으로 코드 분할을 수행하여 페이지별로 필요한 자바스크립트 파일을 분리합니다. 이는 초기 로딩 속도를 개선하고 필요한 페이지만 로드할 수 있게 도와줍니다.

Next.js는 페이지 간 전환 시 필요한 데이터를 미리 불러오는 기능을 지원합니다. 이를 통해 사용자가 페이지를 클릭하기 전에 필요한 데이터를 미리 로드하여 사용자 경험을 개선할 수 있습니다.

Next.js는 이미지 최적화를 자동으로 처리하여 이미지 로딩 성능을 향상시켜줍니다.

 

---

정리

오늘 다시 한 번 작성하면서 Next.js를 왜 사용했는지 느낄 수 있었습니다.