채용공고에서 계속 나와서 눈에 밟혀 정리하게 되었다.
심지어 수업에도 언급이 되어 한번쯤은 사용해야지 싶었는데
이번 기회에 다뤄 볼 예정이다.
Next.js
서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다.
react 공식문서에서 언급
리액트 공식 문서에서도 Next.js가 언급이 되며
심지어 사용을 독려하기도 한다.
pre-rendering
client에 html이 로드되기 전에 자바스크립트를 이용해 html로 만드는 것을 말한다.
Build ->SSG(Static-Site generation),
runtime-> SSR( Server-Side Rendering )
더 알아보기
csr: 브라우저이서 html 파일 로드시 자바스크립트를 이용하여 렌더링
ssg: 브라우저에서 해당 페이지 접속 시 html 렌더링 전달
ssr: 페이지 요청할 때마다 서버에서 렌더링
isr: ssg 내용 업데이트 어려운 점 보완-> 일정 주기마다 페이지 빌드
설치 방법
npx create-next-app [프로젝트 이름]
Page Navigation
react-router-dom을 대체하는 next/link, next/router가 내장
API Routes
복잡한 서버 설정 없이 api 배포 가능
data fetch
getServerSideProps
getStaticProps
getStaticProps
styling
Tailwind CSS
배포
vercel이 만든 프레임워크이므로
vercel을 이용하면 github에 푸시만 하면 배포 가능
웹 개발자