한 입 크기로 잘라먹는 Next.js(15+)

# Section2

1. Page Router를 소개합니다

• 많은 기업에서 사용되고 있는 안정적인 라우터
• React Router 처럼 페이지 라우팅 기능 제공
• Pages 폴더의 구조를 기반으로 페이지 라우팅을 제공함
• 파일명, 폴더명을 기반으로 페이지 라우팅이 진행된다
• 동적경로는 대괄호를 사용 ex) [id].js

실습

1. $ npx create-next-app@14 section2
   npx(Node Package Executor)
   최신버전의 노드패키지를 다운로드 없이 바로 실행시킬 수 있는 명령어
   
   create-next-app
   새로운 next앱을 생성하는 node.js 패키지
   
   @14
   14버전으로 설치, 페이지라우터에 존재하는 기능을 안정적으로 사용 가능
   
   옵션 참고

2. $ npm run dev 입력시 개발모드로 next 실행
   -> http://localhost:3000 으로 접속가능

3. 메인페이지는 src/pages/index.tsx
   

4. test.tsx 생성
   

// 📄test.tsx
export default function Page() {
  return <h1>test</h1>;
}

http://localhost:3000/test로 접속시, 화면에 test가 출력되는 것을 확인할 수 있다

5. __app.tsx와 __document.tsx는
   모든 페이지에 공통적으로 적용될 로직이나 레이아웃, 데이터를 다루기 위해 필요한 파일
   
   5-1. __app.tsx
   모든 페이지 컴포넌트들의 부모 역할을 하는 next앱의 루트 컴포넌트
   전체페이지에 공통적으로 포함되는 헤더나 레이아웃을 렌더링 or 비즈니스 로직들을 작성할 수 있는 공간
   
   5-2.__document.tsx
   모든페이지에 공통적으로 적용이 되어야 하는 next 앱의 html 코드를 설정하는 컴포넌트
   기존 React앱의 index.html과 거의 비슷한 역할

6. next.config.mjs : next앱의 설정을 관리하는 파일
   실습을 위해서 reactStrictMode: false로 설정

2. 페이지 라우팅 설정하기

1. src/pages/index.tsx 초기화

// 📄index.tsx
export default function Home() {
  return <h1>인덱스</h1>;
}

2. src/styles/global.css 초기화
   코드 전부 삭제

3. src/styles/Home.module.css 파일 삭제
   실습에 필요하지 않기 때문에 삭제

4. search.tsx 생성
   

// 📄search.tsx
export default function Page() {
  return <h1>search</h1>;
}

http://localhost:3000/search로 접속시, 화면에 search가 출력되는 것을 확인할 수 있다

만약 폴더명으로 구분하고 싶다면? → search 폴더, index.tsx 파일 생성

쿼리스트링 셋팅하기

쿼리스트링은 페이지 경로에 영향을 주지 않는다

// 📄search/index.tsx
import {useRouter} from 'next/router'  // 1. useRouter import 하기
export default function Page() {
  const router = useRouter();  // 2. hook을 호출하여 변수에 저장
  console.log(router);  // 3. 콘솔에 출력하여 결과 보기
  const {q} = router.query;  // 4. 쿼리스트링 꺼내오기
  return <h1>search{q}</h1>;
}

콘솔 출력 결과

쿼리스트링을 포함한 return 결과

동적경로(url 파라미터)를 가진 페이지 만들기

url 파라미터도 쿼리스트링과 같이 router 객체에 저장이 된다

book 폴더, [id].tsx 파일 생성

// 📄[id].tsx
import { useRouter } from 'next/router';
export default function Page() {
  const router = useRouter();
  const { id } = router.query;
  return <h1>Book {id}</h1>;
}

Catch All Segment

/book/123/456/789 이런식으로 더 많은 url 파라미터를 받으려면
파일의 이름을 [...id].tsx 로 변경해준다

여러 개의 파라미터를 받는 경우에는 배열 형태로 받아온다

⚠️그런데⚠️
Catch All Segment 는 뒤에 경로가 뭐라도 나와야 하기 때문에
뒤에 파라미터가 붙지 않으면 Page Not Found가 발생한다

http://localhost:3000/book/12345 → 정상작동
http://localhost:3000/book → Page Not Found

해결책 2가지
① src/pages/book 폴더에 index.tsx 페이지 생성

② 파일명을 대괄호로 한 번 더 감싸기 (=Optional Catch All Segment)
    [...id].tsx → [[...id]].tsx

404 페이지 설정

404.tsx 파일 생성

// 📄404.tsx
export default function Page() {
  return <div>존재하지 않는 페이지입니다</div>;
}