codinghatso

Next.js | Pages Router 1장 ~ 10장 본문

WEB/Next.js

Next.js | Pages Router 1장 ~ 10장

hatso 2025. 4. 12. 17:16

1장은 github에 준비되어 있는 학습자료를 내 로컬환경에 set up 하는 내용입니다.

2장은 로컬환경에서 정상 작동하는지 확인하는 챕터입니다.

3장은 편집 후에 Fast Refresh가 되는지 확인하는 챕터입니다. (저장 후 페이지 새로고침 없이 적용되는 현상)

4장은 앞으로 학습할 내용을 미리 공지하는 챕터입니다.

  • 통합 파일 시스템 라우팅을 사용해 new page를 만들기.
  • Link component를 client-side 에서 페이지간 탐색을 어떻게 하는지 학습.
  • code splitting과 prefetching을 우한 튼튼한 기반 학습.

5장은 1장을 건너띈 학습자를 위한 챕터인 것 같습니다.

6장은 Next.js의 파일시스템 기반 라우팅을 복습하는 챕터입니다. page/posts/first-post.js 파일을 만들어 로컬에서 확인해 보는 것까지 실습합니다.

7장은 <Link/> 태그에 대해서 알아보고 실습하는 챕터입니다.

8장은 Client-Side Navigation에 대해서 알아보는 챕터입니다.

  • Next.js는 코드 분할, 클라이언트 측 탐색, 프리페칭(제작 중)을 통해 애플리케이션을 자동으로 최적화합니다.
  • 아래 파일로 경로를 생성하고 내장된 구성 요소를 사용합니다. 라우팅 라이브러리가 필요하지 않습니다.
  • 더 자세히 알아볼 수 있습니다 Link API 참조 및 라우팅 문서의 일반적인 구성 요소.

9장은 Layout Componet 에 대해서 알아보는 챕터입니다.

여기서 layout.module.css 파일을 사용하는데 이 module을 사용하면 className을 자동으로 고윳값을 주게 되어 중복되는 일이 발생하지 않습니다. 이중복을 자동으로 막아주는 게 module의 핵심입니다.

10장은 본격적인 CSS 적용을 예고하면서 다음 챕터로 이어집니다.

Comments