Next.js/Foundations
[Foundation] Next.js란?
atmosg
2023. 4. 15. 08:25
1. About Next.js
1.1 웹 애플리케이션 구현
근래엔 최신 애플리케이션 구현 시 아래와 같은 사항들을 고려해야 한다.
- 유저인터페이스 : 유저가 어떻게 소비하고 상호작용하는지
- 라우팅 : 유저가 애플리케이션의 페이지나 여러 요소(파트)들을 탐색하는지
- 데이터패칭 : 데이터가 어디에 존재하며 이를 어떻게 가져올지
- 렌더링 : 정적/동적 콘텐츠를 어디에 어떤 방식으로 렌더링할 지
- 통합integration : 어떤 써드파티 서비스를 사용할 것이며, 이를 어떻게 애플리케이션과 연결할지(CMS, auth, 결재 등등)
- 인프라 : 애플리케이션 코드를 어디에 배포, 저장, 실행시킬지(서버리스, CDN, Edge 등등)
- 성능performance : 어떻게 최적화할지
- 확장성 : 애플리케이션이 조직이나 관련 데이터, 트래픽 증가에 어떻게 대처하고 키워나갈지
- 개발자경험 : 팀의 애플리케이션 구축 및 유지관리에 대한 경험
이처럼 요새는 애플리케이션 하나 만드는데도 고려해야 할 사항들이 많데, 이를 어떻게 구현할지는 온전히 개발자의 부담으로 전가된다. 직접 솔루션을 구현할 수도 있고, 라이브러리나 기타 프레임워크를 사용할 수도 있는데 바로 이 대목에서 Next.js가 등장한다.
개발자가 고려해야할 많은 부분들을 보다 쉽고 빠르게 개발할 수 있도록 필요한 도구(블록)들을 제공해주는 프레임워크가 바로 Next.js이다.
1.2 Next.js란?
위에서 언급한 내용을 정리하자면 결국 Next.js란 개발자가 빠른 웹 애플리케이션을 개발할 수 있도록 관련 기술을 제공해주는 유연한 프레임워크이다. 리액트 '프레임워크' 라는 말이 보여주듯, Next.js는 리액트에 필요한 툴과 구성을 핸들링하며, 추가적인 구조와 기능 및 최적화 도구들을 제공한다.
리액트에 기반하고 있으므로 얼마든지 리액트로 UI를 작성할 수 있고, 필요에 따라 Next.js를 갖다쓸 수 있다. 즉, 라우팅이나 데이터 패칭, 인터그레이션 등 필요하다고 생각되는 부분에 대해서 Next.js를 쓰면 그만인 것이다.
본인이 개인 개발자건 대규모 개발팀에 속해있건간에 리액트와 Next.js를 활용한다면 동적이고 인터랙티브하면서 퍼포먼스도 좋은 웹 애플리케이션을 만들 수 있을 것이다.