[한 입 Next.js] 03. Pages Router

Pages Router

• 현재 많은 기업에서 사용하고 있는 안정적인 라우터
• React Router처럼 페이지 라우팅 기능을 제공함
• Pages라는 폴더를 기반으로 페이지를 구분

폴더와 페이지

• 폴더 이름 아래 index.js > 해당 페이지
• 대괄호 변수 > 동적 경로 (Dynamic Routes)

 

 

시작하기

설치 방법

npx create-next-app@14 section02

• Node Package Executor: npm js.com에 올라와있는 최신 버전을 다운로드 없이 바로 실행
• create-next-app: Next.js에서 소개하는 Next.js app을 생성하는  Node.js 패키지
• @14: 14버전으로 설치 (Pages Router만 14로 실습)
• section02: 폴더 명

설치 시 설정

 

 

실행하기

 

 npm run dev // 개발 모드로 Next.js app 실행

 

폴더, 파일

• package.json: 패키지 정보 보관 (scripts, dependencies 등)
• public: 페이지 내부에서 사용할 정적인 이미지 파일
• src: pages, styles 등 폴더 포함
• pages: 경로에 해당하는 페이지 파일과 _app.tsx, _document.tsx
  •  _app.tsx, _document.tsx: 모든 페이지에 공통적으로 적용할 요소들
  • _app.tsx: 모든 페이지 컴포넌트의 부모 컴포넌트 (루트 컴포넌트 역할)
• props로 Component, pageProps가 있음
  • Component: 페이지 역할을 하는 컴포넌트
  • pageProps:Component에 전달할 props 객체
• 구조 확인: browser 개발자 도구 - React - Components
• 만약 공통적으로 나타나야 할 것이 있으면 App의 return에 추가해주면 됨
• _document.tsx: 모든 페이지에 공통적으로 적용할 Html 태그 (react의 index.tsx 역할)
• next.config.mjs: Next.js app 설정 관리 파일 > reactStrictMode: false로 설정 (실습을 위해)
• reactStrictMode: React.js  app의 잠재적 문제를 감지함 > 개발 모드로 실행 시 콘솔 두 번 실행

 

 

 

 

출처 강의 및 링크: 한 입 크기로 잘라먹는 Next.js 2.1강 (이정환)

 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs

한 입 크기로 잘라먹는 Next.js(15+) 강의 | 이정환 Winterlood - 인프런