NEXT.js 사용하는 이유
클라이언트사이드 렌더링
- 초기 로딩이 느리다
- 검색 엔진에 제공할 수 잇는 정보가 적다
-> 해당 문제점을 프리렌더링으로 해결
프리렌더링:
서버가 그때그때 렌더링해서 HTML을 만들어서 보내 주는 것
리엑트에서 프리렌더링을 하려면 서버가 필요함
(서버에서 렌더링을 해야하기 때문)
(서버를 직접 마련해 주는 호스팅 서비스를 사용)
이외 모든걸 한방에 해결해 주는 것이 next.js이다
NEXT.js
-
프리렌더링 해줌
-
verbal로 서버 호스팅
(굉장히 쉽고 빠르게 코드를 배포할 수 있을 뿐만 아니라 next.js에 최적화된 서버를 이용할 수 있다) -
파일 시스템 기반 라우팅
(편하게 페이지를 나누고 개발할 수 있다)
NEXT.js의 css 사용법
- 리엑트 컴포넌트 파일에서 module.css를 임포트해서 쓰면 됌
- 사이트 전체에 적용할 때는 _app.js라는 파일에서 임포트하면 됌
라우팅
어떤 주소에 어떤 페이지를 보여줄지 정하는 것
html 에서의 라우팅
NEXT.js에서의 라우팅
-> 피일시스템 기반 라우팅: 파일의 경로가 주소에 매칭되는 라우팅 방식.
Next.js에서는 파일시스템 기반의 라우팅을 지원하는데 html로 개발할 때랑 비슷하게 개발할 수 있다
다이나믹 라우팅
쉽게 말해 여러 주소를 하나의 페이지 컴포넌트에서 처리하는 방법
사용방법:
컴포넌트 이름을 [id].js로 바꿔서 사용
-> 대괄호를 쓰면 이 안에 있는 값은 변수처럼 쓸 수 있다
(이런걸 next에서는 param이라고 함)
(파일 말고도 폴더에다가 자유롭게 사용가능)
정리
- pages라는 폴더 안에다가 폴더랑 자바스크립트 파일을 만들고 디폴트 엑스포트로 컴포넌트를 내보내면 이게 페이지가 됌
- 다이나믹 라우팅을 하고 싶으면 이름에다가 대괄호를 쓰고 param의 이름을 적어주면 됌
항상 웃어 봅시다