Next.js
-
_app.js 와 HeadNext.js 2022. 3. 10. 22:32
_app.js : 서버로 요청이 들어왔을때 가장 먼저 실행되는 컴포넌트, 페이지에 적용할 공통 레이아웃 역할. 다른 컴포넌트의 return 부분이 _app.js의 Component 변수로 입력된다. const NodeBird = ({ Component }) => { return ( ); }; NodeBird.propTypes = { Component: PropTypes.elementType.isRequired, }; export default NodeBird; 전체 공통 사항은 _app.js에서 관리하고 부분 공통인 사항은 LayoutComponent로 관리함. Head : html의 공통되는 head 정보를 관리함. _app.js 만이 아닌 각 컴포넌트에서 정의 가능하다. const Home = () ..
-
Next.js 란Next.js 2022. 3. 3. 00:55
Next.js는 React로 만드는 Server Side Rendering Framework. *Server Side Rendering & Client Side Rendering - CSR: 모든 js 파일을 로드하고 렌더링 - 빠른 반응 속도, 서버 부하 감소, 사용자 친화적 - SEO 불리(자바스크립트로 상호작용 후 페이지에 내용 업로드) - 초기 로딩 속도 느림 - SSR: 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 전송함. - SEO, 검색엔진 최적화 - 빠른 초기로딩 Next.js가 제공하는 주요기능 1. hot reloading 2. automatic routing - pages 폴더에 있는 파일은 해당 파일 이름으로 라우팅 3. single file componen..