Next.js란?
- Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는
서버 사이드 렌더링(server-side rendering)(SSR), 정적 사이트 생성(static site generation) (SSG),
증분 정적 재생성(ISR) 과 같은 다양하고 풍부한 기능을 제공한다.
- Next.js는 첫 릴리스부터 리액트가 제공하지 않는 다양한 기능을 제공하면서 리액트 웹 앱 개발 분야의 판도 바꿨다.
그 예시로는 코드 분할(code splitting), 서버 사이드 랜더링, 파일 기반 라우팅, 경로 기반 프리페칭(pre-fetching)
Next.js가 제공하는 기능
- 정적 사이트 생성
- 증분 정적 콘텐츠 생성
- 타입스크립트에 대한 기본 지원
- 자동 폴리필 적용
- 이미지 최적화
- 웹 애플리케이션의 국제화 지원
- 성능 분석
리액트와 Next.js의 가장 큰 차이점
리액트 = liabrary
Next.js = framework
주의 해야할 점
- 서버 사이드 랜더링 페이지나 정적으로 생성된 페이지 모두 Node.js에서 실행되기 때문에 fetch, window, document와 같이
웹 브라우저에서 제공하는 전역 객체나 canvas 같은 HTML 요소에는 접근할 수 없다.
프로젝트 생성
npx create-next-app <app-name>
Next.js에서의 내비게이션(pages/ directory)
- pages/ directory 안의 모든 자바스크립트 파일은 퍼블릭(public) 페이지가 된다.
- pages/ directory의 index.js 파일을 복사해서 about.js로 바꾸고 http://localhost:3000/about으로 접근하면
같은 페이지로 접근 할 수 있다.
- 반드시 있어야 하고 용도가 정해져 있는 directory(public/, pages/)
댓글