Next.js 업데이트 사항

1.Next.js 업데이트 사항

Next 12 -> 14 로의 업데이트에서 주요한 변경 사항은
Page Router 방식에서 App Router 방식으로의 변화가 있었다는 점이다.

• Next.js 12: 기존의 Page Router 기반
• Next.js 13: 새로운 App Router 도입
• Next.js 14: App Router 안정화 및 완성도 향상

2.Router란

• 네트워크 용어로는 경로를 설정하고 안내하는 장비를 의미
• 웹 개발에서는 URL과 컴포넌트(페이지)를 연결하여 사용자 네비게이션을 관리하는 역할
• Navigation이 ‘사용자가 지정한 페이지로 이동하는 동작’을 의미한다면,
• Router는 ‘컴포넌트와 URL을 매핑하여 체계적으로 페이지 전환을 관리하는 시스템’으로 더 넓은 개념임

3. URL 정의 방식의 변화

(1). Page Router

• pages 디렉토리를 기반으로 동작
• 파일 생성이 URL 정의가 되는 방식
• _app.tsx 에서 공통 레이아웃 핸들링

     파일 생성     -   URL 정의
pages/
├── index.js     →  /
├── login.js     →  /login
└── blog/[id].js →  /blog/:id

(2). App Router

• app디렉토리를 기반으로 동작
• React Server Components (RSC)를 기본으로 사용.
• 페이지 단위뿐만 아니라 레이아웃 단위도 파일로 세분화 가능
• 각 디렉토리별로 독립적인 레이아웃을 지정할 수 있어 구조적이고 명확한 UI 구성이 가능

     파일 생성       -    URL 정의
app/
├── page.js        → /
├── login/
│   └── page.js    → /login
├── blog/
│   └── [id]/ 
│       └── page.js → /blog/:id

4.레이아웃 처리에서의 변화

(1).Page Router

• 이전 버전에서는 공통 레이아웃(Nav & Footer)사용을 위해 _app.tsx를 컨트롤
• 특정 페이지에서의 디자인을 변경 필요시, 추가 조건문이 필요했음

pages/
├── _app.js               (전체 앱 레이아웃) - 로그인만 다르게 처리할 경우 추가 설정 필요
├── login/
│   └── index.js          (로그인 메인 페이지)

  if (isLoginView) {
    return <LoginLayout>{children}</LoginLayout>
  }

  return (
    <>
      <Nav type={navType} scrollanimation={navScrollAnimation} />
      {children}
      <Footer />
    </>
  )

(2). App router

app/
├── layout.tsx            (전체 앱 레이아웃)
├── login/
│   ├── layout.tsx        (로그인 전용 레이아웃)
│   └── page.tsx          (로그인 메인 페이지)

5. Next.js를 사용하는 이유

(1). 서버 사이드 렌더링 (SSR) 및 정적 사이트 생성 (SSG)

• HTML을 서버에서 미리 생성해 전달 → SEO와 초기 로딩 최적화
• getServerSideProps, getStaticProps, getInitialProps 등

(2). 파일 기반 라우팅

• pages/ 또는 app/ 디렉토리 구조만으로 라우팅 자동 처리

(3). React Server Components (RSC)

• 서버에서 실행되는 React 컴포넌트
• 클라이언트에서 JS 없이도 서버에서 미리 렌더링한 결과 제공

(4). App Router 기반 레이아웃 시스템

• Next.js App Router는 각 경로별 layout.tsx 구성 가능

(5). 데이터 패칭의 체계화

• 각 페이지에서 SSR, SSG, ISR(증분 정적 생성) 등을 통해 데이터 패칭 전략을 서버/빌드 단에서 명시적으로 구성

• getServerSideProps, getStaticProps, fetch, cache 등 통합적으로 관리 가능