Next.js (2) - Page Router

Installation

• 'npx create-next-app [프로젝트 이름]'으로 프로젝트 생성 시, App Router 대신 Pages Router 선택 가능

개발 모드와 프로덕션 모드

• npm run dev: 개발 모드 실행 (Hot reloading 등 개발 환경 기능 지원)
• npm run build: 제품 배포용으로 프로젝트 빌드
• npm run start: build된 프로젝트 실행 (운영 서버 배포와 동일한 환경)

Next.js에서의 페이지란?

• 'pages' 디렉토리에 있는 React Component로 페이지 생성
• 폴더 구조에 따라 자동으로 URL이 결정되는 파일 기반 라우팅 시스템 사용

Index Routes

• 간단한 페이지 예시:
  'pages/index.js', 'pages/about/index.js', 'pages/about.js'
• URL은 폴더 구조에 따라 자동으로 결정됨

Nested Routes

• 중첩된 폴더 사용 가능: 'pages/blog/first-post/index.js'

Dynamic Routes

• 동적 URL 처리 가능: 'pages/posts/[postId].js'
• 내장된 router를 사용하여 query parameter에 접근

Page Navigation

• React의 'react-router-dom' 대체: 'next/link', 'next/router' 사용
• 'next/link'로 링크 생성, 'next/router'로 프로그래밍 방식의 페이지 이동.

API Routes

• 복잡한 서버 설정 없이 API 생성 및 배포 가능
• 'pages/api' 디렉토리에 파일 기반 라우팅 시스템과 동일한 경로 사용

Dynamic API Route

• Dynamic route 지원: 'pages/api/test/[id].js'

사용 사례 - 외부 API 주소 마스킹(masking)

• 'pages/api' 아래의 파일들은 빌드 시 클라이언트 번들에 포함되지 않음
• 외부 API 주소 은닉화를 통해 개발자 도구의 네트워크 탭에서 주소를 확인하지 못하도록 함

Pages Router의 Data Fetching 및 Rendering

• Pages Router에서 Data Fetching과 Rendering은 페이지 단위로 이루어짐

Server-Side Rendering (SSR) -'getServerSideProps'

• 'getServerSideProps' 함수는 Server에서만 실행되며, Browser에서는 실행되지 않음
• Runtime에서 실행되며, context 객체를 통해 URL Query 파라미터에 접근 가능
• 반환 값은 해당 페이지의 props로 전달됨

Static-Site Generation (SSG) - 'getStaticProps', 'getStaticPaths'

• 'getStaticProps': SSG를 원하는 페이지에 추가하여 해당 페이지가 빌드될 때 렌더링
• Server에서만 실행되며, build 시에만 실행됨
• 반환 값은 해당 페이지의 props로 전달됨
• 'getStaticPaths': dynamic routes를 제공하기 위한 것으로,
  미리 어떤 paths를 Static Site Generation 할 지 정함
• 'getStaticPaths'에 의존하므로 'getStaticProps'가 함께 사용되어야 함
• 반환 값은 'getStaticProps'의 props로 전달됨
• 'fallback' 옵션: 동적 경로를 처리할 때 동작 방식 결정
• 'false': 'getStaticPaths'에 없는 페이지는 404로 연결
• 'true': 'getStaticPaths'에 없는 페이지 요청 시,
  fallback 페이지를 보여주고 서버에서 생성 후 보여줌
• 'blocking': 서버에서 페이지 생성 후 보여줌

Incremental Static Regeneration (ISR)

• 'getStaticProps'에 'revalidate' 속성을 추가하여 사용
• 페이지 요청 시마다 최대 10초 간격으로 해당 페이지를 다시 빌드하여 업데이트함

_app.js

• Next.js의 root component
• 모든 페이지에서 공통적으로 적용되는 레이아웃, 글로벌 CSS, 초기값 설정 등을 포함
• 예시: 모든 페이지의 공통 레이아웃, 글로벌 CSS 적용

_document.js

• HTML 구조를 커스터마이징할 때 사용하는 파일
• Server Side에서만 렌더링되며, 초기 HTML 렌더링 시에 CSS와 같은 스타일이 적절하게 적용될 수 있도록 도움
• 예시: styled-components를 사용할 때 초기 깜빡임을 방지하는 용도

import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      }
    } finally {
      sheet.seal()
    }
  }
}

export default MyDocument

• ServerStyleSheet을 사용하여 styled-components로부터 생성된 스타일이 HTML 초기 렌더링에 포함되도록 함

404.js

• 페이지를 찾을 수 없을 때 나타나는 커스텀 404 페이지
• 예시: 404 페이지 커스터마이징

// pages/404.js
export default function Custom404() {
  return <h1>404 - Page Not Found</h1>
}