next.js 는 리액트 기반의 프레임워크

create-next-app 으로 설치하면

  1. 컴파일과 번들링이 자동으로 된다. (webpack 과 babel)
  2. 자동 리프레쉬 기능으로 수정하면 화면에 바로 반영된다.
  3. 서버사이드 렌더링이 지원된다.
  4. 스태틱 파일을 지원한다.

https://react.semantic-ui.com/

npm install semantic-ui-react semantic-ui-css

import ‘semantic-ui-css/semantic.min.css’

레이아웃을 만들기 위해선 _app.js 을 이용함 모든 페이지는 이곳을 통함.

_app.js를 이용하면 페이지 전환시 레이아웃을 유지할 수 있음. 페이지 전환시 상태값을 유지할 수 이씀. componentDidCatch를 이용해 커스텀 에러 핸들링을 할 수 있음. 추가적인 데이터를 페이지로 주입시켜주는게 가능함. 글로벌 CSS를 이곳에 선언함.

_app.js에서 받은 Component는 페이지를 의미함. pageProps 는 초기 객체임. 메서드를 사용하지 않으면 빈 객체가 전달됨.