Next js 강좌 #1 소개, 페이지 레이아웃 (Intro, Page layout)

npm run dev

create-next-app으로 설치하면

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

pages/api/about.js

// pages/api/about.js
export default function About() {
	return <div>ABOUT</div>
}

// 브라우저에서 localhost:3000/about으로 접근 가능

Untitled

localhost:3000/view/131 이런식으로 아무 숫자로 접근 가능

_app.js

  1. 페이지 전환시 레이아웃을 유지할 수 있습니다.
  2. 페이지 전환시 상태값을 유지할 수 있습니다.
  3. componentDidCatch를 이용해서 커스텀 에러 핸들링이 가능합니다.