[NextJS] 라우팅 시스템 종류 - app vs pages 디렉토링 방법 비교, 폴더 구조 예시, useRouter 오류 디버깅

Next.js에서 app 디렉토리와 pages 디렉토리는

각각 다른 방식으로 페이지 라우팅을 처리하는 두 가지 방법을 제공합니다.

---

1. pages 디렉토리

import { useRouter } from 'next/router'; 사용

/pages 구조 예시
  index.tsx                  → /
  about.tsx                  → /about

  # 👤 사용자용
  client/
    dashboard.tsx            → /client/dashboard
    profile.tsx              → /client/profile
    blog/
    	[id].tsx            → /client/blog/:id

  # 🛠 관리자용
  admin/
    index.tsx                → /admin
    users.tsx                → /admin/users
    blog/
      index.tsx              → /admin/blog
      [id].tsx               → /admin/blog/:id

  _app.tsx                   → 전체 레이아웃
  _document.tsx              → 문서 구조

 

특징:

• 라우팅은 파일 이름 기반
• 모든 페이지는 클라이언트 컴포넌트
• Next.js 내부적으로는 React Router 없이 동작

장점:

• URL 구조 기반으로 명확히 분리됨
• 간단하고 직관적: 페이지 기반의 라우팅이 자동으로 설정되어, 설정이 간단하고 구조가 명확함
• 동적 라우팅과 API를 쉽게 구현할 수 있음

---

2. app 디렉토리 (앱 라우팅)

import { useRouter } from 'next/navigation'; 사용

'use client'; 선언 필요

/app 구조 예시
  layout.tsx                 → 기본 레이아웃 (모두에 적용 가능)
  page.tsx                   → /
  about/
  	page.tsx             → /about

  # 👤 사용자용
  client/
    layout.tsx               → /client 전용 레이아웃
    dashboard/
    	page.tsx       → /client/dashboard
    profile/
    	page.tsx         → /client/profile
    blog/
    	[id]/
        	page.tsx       → /client/blog/:id

  # 🛠 관리자용
  admin/
    layout.tsx               → /admin 전용 레이아웃
    page.tsx                 → /admin
    users/
    	page.tsx           → /admin/users
    blog/
      page.tsx               → /admin/blog
      [id]/
      	page.tsx          → /admin/blog/:id

  not-found.tsx              → 404 처리

 

특징:

• 폴더 구조 기반 중첩 라우팅 가능
• page.tsx = 실제 페이지 컴포넌트
• layout.tsx = 공통 레이아웃 (전역/섹션별 가능)
• loading.tsx, error.tsx = 상태별 화면 분기 지원

장점:

• 서버 컴포넌트와 클라이언트 컴포넌트를 혼합하여, 더 세밀한 최적화가 가능
• 각 영역이 자체적인 컴포넌트/스타일을 가질 수 있어 마이크로 프론트엔드처럼 설계 가능
• 리액트 18에서 제공하는 서버 컴포넌트와 서버 사이드 렌더링을 더욱 잘 활용할 수 있음
• 레이아웃과 로딩 상태를 구성하여, 페이지 내에서 효율적으로 UI를 처리할 수 있음
• 더 나은 데이터 로딩: 로딩과 에러 처리를 각 페이지 수준에서 세밀하게 정의할 수 있어, 사용자 경험을 더욱 개선할 수 있음

---

3. 비교:

• pages 디렉토리는 기존 방식의 Next.js 프로젝트에서, 간단한 라우팅과 API 라우트를 처리하는 데 적합합니다. 특히 간단한 사이트나 빠른 개발이 필요할 때 유용합니다.
• app 디렉토리는 더 복잡한 앱에서 서버 컴포넌트와 데이터 처리 최적화가 중요한 경우에 좋습니다. 페이지마다 로딩 상태를 정의하거나, 서버 사이드 렌더링을 최대한 활용하고 싶다면 app 디렉토리를 사용하는 것이 좋습니다.

따라서 프로젝트의 요구 사항에 따라 적절히 선택할 수 있습니다. pages를 사용하면서 필요한 부분만 app 디렉토리로 이동할 수도 있고, 처음부터 app 디렉토리를 사용하는 구조로 시작할 수도 있습니다.

 

결론

• 간단히 개발하고 싶다면 pages 방식
• 기획적이고 확장 가능한 구조를 원한다면 app 방식

👉 Next.js 팀은 앞으로 app 방식(App Router)을 기본으로 삼고 업데이트할 예정이기 때문에,
     장기적으로는 app 방식에 익숙해지는 것이 좋습니다!

 

---

라우팅 관련 오류 : 

Error: × You have a Server Component that imports next/router. Use next/navigation instead. │ Learn more: https://nextjs.org/docs/app/api-reference/functions/use-router ╭─[/Users/suhyun/Desktop/kiosk/kiosk_fe/src/app/page.tsx:2:1] 1 │ import style from "./page.module.css"; 2 │ import { useRouter } from "next/router"; ·

 

원인 :

Next.js 13에서는 app 디렉토리를 사용하는 App Router와 pages 디렉토리를 사용하는 Pages Router가 있는데, app 디렉토리 내에서는 "next/navigation"의 useRouter를 사용해야 함. 이는 Next.js에서 Server Components와 Client Components의 차이를 명확히 하기 위해 변경된 부분이라고 함

pages 방식에서의 라우팅은 클라이언트 중심(Client-Side Rendering)이기 때문에, 라우터 기능을 자유롭게 쓸 수 있어.

하지만 Next.js 13은 성능 향상을 위해 서버 컴포넌트(Server Component) 개념을 도입했어. 이건 말 그대로 React 컴포넌트를 서버에서 먼저 실행해서 화면을 그리는 방식인데, 이때는 브라우저 기능(예: 라우터 조작)을 직접 쓸 수 없어.

그래서 클라이언트 전용 기능(예: useRouter)은 서버 컴포넌트에 바로 쓰면 안 되기 때문에, Next.js가 구분된 전용 모듈(next/navigation)을 제공하는 거야.

-chatGPT

 

 

해결 방법 :

next/router를 next/navigation으로 바꾼다. 끝!