Next.js

웹을 위한 리액트 프레임워크

라이브러리 vs 프레임워크

이 두 용어는 매~~우 자주 들어봤을 것이다. 하지만 어떤 차이점이 있는지 모르는 사람이 많다. 나도 마찬가지다.

라이브러리

공통 기능의 모듈화가 이루어진 프로그램의 집합

React
react-router-dom
redux

프레임워크

개발자가 기능 구현에만 ‘딱’ 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 ‘기술의 조합’

Next.js
Vue.js
Angular.js
Javascript 기반 웹 프론트엔드 SPA 프레임워크

가장 중요한 차이점은 어플리케이션의 제어 흐름의 권한을 누가 가지고 있는지다.
프레임워크는 제어 권한이 프레임워크에게 있고
라이브러리는 개발자에게 있다.

Next.js를 사용하는 이유

• 환경설정이 적은 개발환경
  프레임워크는 개발자가 개발에만 집중할 수 있게 해주는 역할
  필요로하는 웬만한 기능을 보유

• 유용한 기법 제공
  다양한 렌더링 방식 SSR, ISR, SSG
  코드스플리팅 - React에 비해 초기 페이지 로딩이 짧다.
  TTV 향상
  TTV - 사용자가 최초 View를 볼 수 있을 때까지의 시간

• 쉬운 서버 로직 개발
  API Route , server action등을 지원하여 아주 가벼운 서버 개발이 가능

• 매우 쉬운 배포
  Vercel에서 만든 만큼 배포가 굉장히 쉬움

Routing

Next.js는 폴더기반 라우팅으로 파일 구조에 따라 자동으로 라우팅

Page routing

page폴더 하위에 파일을 생성해 라우팅하는 기법

App routiong

App폴더 하위에 폴더를 생성해 라우팅하는 기법

page router와 app router에 대한 논쟁은 꾸준히 이어오고있다.

기존의 React.js가 가지고 있는 한계를 이해하고 왜 Next.js를 사용하는지를 정확히 알고 있어야 합니다. 따라서 app router든, pages router든 주요 핵심 개념(Routing, Rendering, Data Fetching 등)을 잘 이해하면 된다.

dynamic routing

src > app 폴더 밑에 test 폴더를 새로 만들고 그 안에 page.tsx 파일을 만들면 라우팅이 된다.

static routing

폴더 이름을 대괄호로 감싸면 패턴에 일치하는 모든 경로를 페이지로 연결하게 된다.

Link

Next.js의 <Link> 컴포넌트는 브라우저에 링크가 나타나는 순간 해당 페이지의 코드와 데이터를 미리 가져오는 프리페칭 기능을 지원한다. 사용자가 링크를 클릭하기 전에 데이터를 미리 로드함으로써 사용자가 링크를 클릭했을 때 거의 즉시 페이지를 볼 수 있다.
Link 태그는 route 사이에 client-side navigation을 지원한다.
브라우저가 새 페이지를 로드하기 위해 서버에 요청을 보내는 대신, 클라이언트 측에서 페이지를 바꾸어 주기 때문에 페이지 전환 시 매우 빠른 사용자 경험(UX)을 제공한다.

useRouter

onClick 같은 이벤트 핸들러에서 사용useRouter를 사용할 때는 항상 코드 최상단에 “use client”를 삽입해야 합니다.
Next.js에서는 hook을 사용할때 최상댄에 “use client”를 작성해야한다.
onClick 같은 이벤트 핸들러에서 사용.
클릭 후 로직의 순서에 따라 실행하므로, 즉시 이동이 되지 않는다.