[TIL] Next.js란?

Next.js란?

풀스택 웹 어플리케이션을 구축하기 위한 React 프레임 워크이다. next.js를 사용하면 프레임워크는 Next.js가 React에 필요한 도구와 구성을 지원하고 애플리케이션을 위한 별도의 구조, 기능 그리고 최적화를 제공한다는 의미이다.

React를 사용하여 UI를 구축한 다음 Next.js 기능을 점진적으로 채택하여 라우팅, 데이터 가져오기, 연동과 같은 보편적 애플리케이션 요구 사항을 해결하는 동시에 개발자와 사용자 경험을 개선할 수 있다.

웹 어플리케이션에 필요한 빌딩 블록

• 사용자 인터페이스(User Interface) – 사용자가 애플리케이션을 소비하고 상호 작용하는 방식.
• 라우팅(Routing) – 사용자가 애플리케이션의 여러 영역을 탐색하는 방법.
• 데이터 가져오기(Data Fetching) – 데이터의 저장 위치 및 데이터 가져오기 방법.
• 렌더링(Rendering) – 정적 또는 동적 콘텐츠를 렌더링하는 시기와 위치.
• 연동(Integrations) – 타사 서비스(CMS, 인증, 결제 등) 이용 및 연결 방법.
• 인프라(Infrastructure) – 애플리케이션 코드를 배포, 저장 및 운영하는 곳(Serverless, CDN, Edge 등).
• 성능(Performance) – 고객(사용자)를 위해 애플리케이션을 최적화하는 방법.
• 확장성(Scalability) – 팀, 데이터, 트래픽이 증가함에 따라 애플리케이션을 유연하게 조정하는 방법.
• 개발자 경험(Developer Experience) – 팀의 애플리케이션 구축 및 유지 관리 경험.

Next.js에 웹 라우팅 방식

• 트리(Tree): 계층 구조를 시각화하기 위한 규칙이다. 예를 들어 상위 및 하위 구성 요소가 있는 구성 요소 트리, 폴더 구조 등이 있다.
• 하위 트리: 새 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부이다.
• 루트 : 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째 노드이다.
• 리프: URL 경로의 마지막 세그먼트와 같이 자식이 없는 하위 트리의 노드이다.
  
• URL 세그먼트: 슬래시로 구분된 URL 경로의 일부이다.
• URL 경로: 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)