Next.js - Page Router 페이지 라우터

Stella·2026년 1월 8일

Next.js

목록 보기
1/8

페이지 라우터

1) 파일 시스템 기반 라우팅
2) 사전 렌더링 기능
src/pages 폴더 구조 기반 라우팅

npx create-next-app@15.2.3
즉시 실행, 앱생성, 버전

  1. 타입스크립트 사용 ? Y
  2. EsLint 사용 ? Y
  3. TailwindCSS 사용 ? Y
  4. JS코드를 src 디렉토리 보관 여부 Y
  5. AppRouter 사용 여부 ? Y/N
  6. Turbopack 사용 여부 ? N
  7. import alias 수정 여부 ? N

package.json
dev : Next.js 앱을 개발 모드로 실행
build : Next.js 앱을 빌드한다.
start : 빌드한 Next.js 앱을 실행한다. 프로덕션모드로
lint : EsLint 규칙을 기반으로 한 코드의 품질 검사

  • next.config.ts
    리액트에서 strictMode 설정 옵션 -> 문제 찾기 위해 컴포넌트 두번 렌더링 -> false

  • public 폴더 : 정적파일을 보관하는 폴더이다.
    src폴더 -> 체계적인 관리를 위해
    pages폴더 (라우팅 관리 폴더)

  • EsLint : 코드의 품지을 유지하고, 코드에 존재하는 잠재 오류를 미리 발견하도록 도와주는 도구
    eslint.config.mjs

...compat.extends("next/core-web-vitals", "next/typescript"),
{
	rules: {
    	"@typescript-eslint/no-unused-vars":"off", (사용 x 변수를 오류로 판단)
        "@typescript-eslint/no-explicit-any":"warn", -> any명시적으로 사용 못하도록
    }
}

개발 모드로 실행 npm run dev

"script": {
	"dev" : "next dev", // 앱을 개발 모드로 실행
    "build" : "next build" // 앱을 빌드한다.
    "start" : "next start" // 빌드한 앱을 실행한다.
    "lint" : "next lint" // 코드 품질을 검사한다.
}

프로덕션 모드로 실행하기 npm run build

  • 개발 모드와 프로덕션 모드의 차이점
    개발 모드 : 핫 리로딩 활성화 -> 자동 새로고침 기능
    프로덕션 모드 : 실제 사용자에게 배포할 때 사용 -> 코드 최소화, 불필요한 코드 제거

npm run build -> npm run start

라우팅 설정하기

브라우저가 요청하는 URL경로에 따라 적절한 페이지를 화면에 렌더링하는 과정이다.
1) 불필요한 CSS 파일 제거 styles/global.css
2) npm run dev
3) 파일시스템 기반 페이지 라우팅 (자동 매핑)
pages/index.tsx // Home 컴포넌트 -> 인덱스 페이지
pages/search.tsx -> search/index.tsx로 변경해서 라우팅 설정 가능하다.
pages/book/index.tsx

EsLint 옵션 파일

코드 품질을 유지하고, 코드에 존재하는 잠재 오류를 미리 발견하도록

_app.tsx
_document.tsx

1) 글로벌 설정을 담당하는 파일 HTML 문서의 기본 틀

Html lang = "ko-KR" 공통 설정 가능하다.

2) _app.tsx

Next.js 앱에서 루트 컴포넌트 역할을 수행한다. 글로벌 설정(공통 제어)

export default function App ({ Component, pageProps }: AppProps ) 현재 page컴포넌트, 페이지 컴포넌트에 제공할 모든 Props가 전달된다. index.tsx

글로벌 헤더 -> _app.tsx에서 생성하기
book/[id].tsx 파일을 생성한다. (경로가 수시로 변경될 경우)
= 옵셔널 캐치올 세그먼트

쿼리스트링과 URL파라미터 사용하기

- 쿼리 스트링

경로에서 물음표(?)와 함께 표현, 검색어, 필터링 조건을 전달한다. /search?q=한입

export default function Page() {
	const router = useRouter();
    return (<div><h1>검색: {router.query.q}</h1>);
}

- URL 파라미터

localhost:3000/book/123
export default function Page(){
	const router = useRouter();
    return ( <div><h1>{touer.query.id}도서 상세 페이지</h1></div>)
}

- 400, 500 특수 페이지 라우팅

pages/404.tsx 생성 -> 컴포넌트 생성한다.
pages/500일 경우 -> _error.tsx 파일 생성 후 내보낸다.

profile
Stella
공부 기록

0개의 댓글