1. Page Router
- 현재 많은 기업에서 활용되고 있는 안정적인 라우터입니다.
- React Router처럼 페이지 라우팅 기능을 제공합니다.
- Pages 폴더 내부의 파일명을 기반으로 페이지를 라우팅합니다.
- 하지만 파일명뿐 아니라 폴더를 생성하면 폴더명을 기준으로 그 내부의 index 파일을 렌더링하기도 합니다.
- item/[id].js를 생성하면 아래처럼 동적 경로(Dynamic Routes)를 설정할 수도 있습니다.
~/item/1
~/item/2
...
~/item/100
2. Page Router 버전의 넥스트 앱 생성
1) 커맨드 실행
npx create-next-app@14 section02- npx: Node Package Executor 도구
- create-next-app: 넥스트 앱 생성
- @14: 14버전으로 지정
- section02: 폴더명
2) 옵션 설정
- 타입스크립트:
Yes - ESLint:
Yes - Tailwind CSS:
No - 'src/' 디렉토리:
Yes - App Router:
No - 디폴트 import alias 커스터마이징:
No- import alias는 절대경로로 모듈을 import할 수 있도록 도와주는 기능입니다.
- 절대경로를 통해 import문을 간결하게 작성할 수 있기 때문에 사용하지 않을 이유는 없습니다.
- 커스터마이징을 하지 않고 @를 그대로 사용할 것이므로 No를 선택합니다.
- import A from "@/components/~": @는 /src 경로를 의미합니다.
(참고로 Yes, No는 키보드의 화살표 키로 스위칭할 수 있습니다.)
3) 개발 모드 실행
이제 생성된 section02 폴더를 열고 개발 모드를 실행합니다.
npm run dev3. 파일 구조
- pages 폴더에 test.tsx를 생성해보니 정상적으로 라우팅되었습니다.
- 이제 폴더에서 중요한 파일들을 간단하게 알아봅니다:
1) _app.tsx
- 모든 페이지 컴포넌트의 부모 컴포넌트 역할을 합니다.
- 페이지 전환 시 공통 레이아웃, 상태 관리, 전역 스타일 등을 설정할 수 있습니다.
- 리액트의 루트 컴포넌트처럼 동작하지만 Next.js에서 페이지 컴포넌트를 래핑하는 역할에 특화되어 있습니다.
- 앱 컴포넌트의 인자는 아래와 같습니다.
Component: 현재 페이지 역할을 할 컴포넌트pageProps: Component에게 전달될 props가 객체로 저장된 것
- 모든 페이지에 공통적으로 나타나는 내비게이션이 있다면 이 앱 컴포넌트에 작성하면 됩니다.
2) _document.tsx
- HTML 문서의 구조를 커스터마이징할 때 사용합니다.
<html>,<head>,<body>태그를 수정할 수 있으며, 여기에서 폰트 로드, 메타 태그 추가, 외부 스타일시트 로드 같은 작업을 합니다.- 페이지의 렌더링 로직과는 관련이 없고, 서버 사이드에서 한 번만 실행됩니다.
- 리액트의 index.html과 비슷한 역할을 합니다.
3) next.config.mjs
- 넥스트 앱의 설정을 관리하는 파일입니다.
- reacStrictMode는 실습을 위해 false로 끄도록 합니다.
- true로 해두면 리액트의 잠재적인 문제를 확인하기 위해 모든 컴포넌트를 두 번씩 실행하게 됩니다.
- 콘솔 등으로 디버깅할 때 불편하기 때문에 꺼두는 것입니다.
Junior Frontend Developer