개인 포트폴리오 웹사이트 프로젝트를 하기에 앞서, 프론트엔드 최근 경향을 봤을 때, 점점 사용량이 높아지고, 사용하는 기업도 많아지고 있는 Next.js를 도입해서 사용해보고 싶은 생각이 들었다. 그냥 단순히 경험해보고 싶기도 했고, 취업에 있어서도 도움이 될 수 있을거란 생각에 사용해보고 싶었던 것이 처음 생각이었지만 왜 Next.js의 인기가 점점 높아지고, 어떤 장점이 있는지 등에 대해 먼저 학습하고, 이에 따라서 사용을 위해 알아야 할 기본적인 개념들을 학습하는게 필요하다고 생각하게 되었다. 따라서 학습을 하면서 배운 것들을 정리할 겸 & 다른 프로젝트에서 또 Next.js를 사용할 때를 위해 참고하기 위해 글을 쓰게 되었다.
(이 블로그 글은 기본적으로 Next.js 13.4 버전부터 안정화된 App Router 기준으로 작성했다.)
Next.js는 풀스택 웹 애플리케이션을 구축하기위한 리액트 프레임워크이다. 기본적으로, 유저 인터페이스를 구성하기위해 리액트 컴포넌트를 쓰며, 리액트 문법을 이용하여 개발하지만, Next.js만의 추가적인 유용한 기능과 최적화 기능과 함께 개발자로 하여금 더 향상된 개발 경험을 경험할 수 있게 해준다.
개인 개발자든, 팀으로 개발을 진행하든 Next.js는 인터랙티브하고 동적이고, 빠른 리액트 애플리케이션을 만드는데 큰 도움을 준다고 한다.
이 내용은 Next.js 공식페이지 docs의 처음 부분에서 Next.js를 소개하는 첫번째 글인데, 이 내용만 봐서는 Next.js를 쓰지 않을 이유가 없지 않나 하는 생각이 개인적으로 들기도 했다. 왜냐하면 기본적으로 리액트로 개발을 해왔던 상황에서, 이 리액트에 더해 더 많은 기능을, 더 편리하게 이용하여 개발할 수 있도록 만들어진게 Next.js라고 말하고 있으니까..
Next.js에서는 기본값으로, 리액트 문법을 써서 코드를 작성할 경우, 서버 컴포넌트를 사용하며 SSR 방식으로 렌더링을 한다. 다른 블로그 글에서도 다뤘지만, 최근 웹 개발 트렌드에서는 SSR이 CSR보다 더 많은 장점을 가져다 주는 경향이 있는 것으로 보인다. 많은 자료들을 찾아봤지만, 이 SSR이 Next.js를 쓰는 데 있어서 가장 큰 부분이라고 많은 사람들이 말하고 있다. 대표적으로, SSR의 장점에는 빠른 초기 화면 로드, SEO 가 있다. Next.js에서는 이 SSR을 기본적으로 제공하지만, 원할 경우 use client 키워드를 통해 클라이언트 컴포넌트 또한 사용할 수 있다. 계속해서 생각이 드는 것이지만, Next.js는 이론상 React+α 느낌이어서, 안 쓸 이유가 없지 않나 생각이 든다.