Next.js에 대해서 알아보기
KUKJIN LEE • 9개월 전 작성
안녕하세요, 오늘은 FrontEnd Framework: Next JS 13에 대해 알아보도록 하겠습니다. 현재는 14 버전까지 출시됐습니다. 하지만 13버전을 설명드리는 이유는 12버전에서 13버전으로 변경될 때 많은 변화가 있었기 때문에 13버전을 우선적으로 설명드리고, 이후 14버전에 대해서 추가 게시물을 작성하도록 하겠습니다.
설명
풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. 사용자 인터페이스를 구축하기 위해 React Component를 사용하고, Next.js는 추가 기능과 최적화를 제공합니다.
Next.js는 React에 필요한 Compile등의 도구를 추상화하고 자동으로 구성하여 내부에서 작동합니다. 이를 통해 애플리케이션 구축에 집중할 수 있습니다.
Next.js를 사용하면 동적이며 빠르게 React 애플리케이션을 구축할 수 있습니다.
FrontEnd Framework에서 풀스택 웹 애플리케이션 구축을 위한 Next.js에 대한 설명이 왜? 나올까 생각할 수 있지만, 현재 Next.js 제공하는 API를 활용했을 때 속도 측면에서 만족도가 떨어졌습니다.
당장에 대규모 서비스(서버)로 사용하기에는 무리가 있습니다.
Next.js 13 장점
-
Routing: Next.js는 파일 시스템 기반 라우터를 제공, 레이아웃과 중첩 라우팅, 로딩 상태 및 오류 처리를 포함한 라우팅 관련 기능을 손쉽게 구현할 수 있게 합니다.
-
Rendering: 클라이언트 및 서버 렌더링을 지원하며, 정적 및 동적 컨텐츠를 최적화하여 제공합니다. 이를 통해 사용자 경험을 향상시킬 수 있습니다.
-
Data Fetching: async/await을 활용한 데이터 가져오기를 간편하게 처리할 수 있습니다.
-
Styling: 다양한 스타일링 방법을 지원하며, Tailwind CSS와의 호환성이 뛰어남을 강조합니다.
-
TypeScript 지원: TypeScript 프로젝트의 증가와 함께, 타입 체크와 효율적인 컴파일을 지원하여 안정적인 사용자 정의와 타입 체크를 가능하게 합니다.
Next.js 13 단점
-
러닝 커브: Next.js의 사용은 13 이전과 이후로 나눠 볼 수 있습니다. App 폴더 구조로의 전환은 새로운 학습이 필요하며, 기존의 Pages 폴더 구조와 함께 사용하는 경우 러닝 커브가 있습니다. 특히, Pages에서 App 폴더로의 마이그레이션은 도전적일 수 있으며, 일부 프로젝트는 Pages 폴더를 계속 사용하여도 문제가 없습니다.
-
서버 리소스: SSR은 사용자 경험을 향상시킬 수 있는 장점이 있지만, 큰 규모의 트래픽이 있을 경우 서버 부하를 증가시킬 수 있는 단점이 있습니다.
-
API: Next.js를 사용하여 내부적으로 서버를 구현할 수 있으며, Node.js나 Express.js를 사용하여 서버를 구축한 경험과 비교하여 Next.js로 모든 서버 코드를 옮겼을 때 속도 측면에서 부족함을 느낄 수 있습니다. 이는 Next.js 13의 FrontEnd에 초점을 맞춘 내용이며, BackEnd 측면은 추후 다룰 예정입니다.
Next.js 13 정리
React와 함께 빠르고 SEO 최적화 된 풀스택 애플리케이션 구축에 유용한 프레임워크입니다. SSR도 제공하고, 서버 구축까지 가능해졌습니다.
서버 기능은 부족한 부분이 있지만, 계속해서 개선하고 있다고 발표했으니, 정말 좋은 프레임워크가 될 수 있다고 봅니다.
- 개발자 관점이 아닌, 사용자 관점(친구)에게 물어봤을 때, 서버가 느린 걸 모르겠답니다. 속도가 다르다 설명을 해줘도, 잘 모르겠다.라는 답을 받았습니다.
- 이론상, Next.js SEO 최적화는 맞습니다. 하지만 SEO를 최적화 시켜봤을 때, 가장 중요한 건 컨텐츠의 내용이라고 생각합니다.
