Next.js (2) - APP Router와 배포

Installation

• 'npx create-next-app [프로젝트 이름]'으로 Next.js 프로젝트 생성
• 설정 시 TypeScript, ESLint, Tailwind CSS 등 여러 옵션 선택 가능
• App Router를 사용할 것인지 여부를 선택할 수 있음

서버 컴포넌트

• React 18에서 제시된 컴포넌트를 렌더링하는 새로운 개념
• 서버 컴포넌트는 서버에서 렌더링하여 초기 로딩 속도를 향상시키고, 클라이언트 측 상호작용에 필요한 부분만 추가로 불러와서 사용한다.
• 모든 컴포넌트가 기본적으로 서버 컴포넌트이며, 유저와 상호작용하는 부분을 제외하고는 서버 컴포넌트를 사용하는 것이 권장됨
• 클라이언트 컴포넌트를 사용하려면 컴포넌트 상단에 ''use client''를 추가

App Router에서의 페이지란?

• 'app' 디렉토리 안에 있는 'page.js' 파일을 의미한다.
• 페이지를 만들 때는 'app' 폴더 아래에 'page.js' 파일을 생성하고 폴더 구조에 따라 URL이 자동으로 결정되는 파일 기반 라우팅 시스템을 따른다.

Layout

• 페이지 간 공유되는 UI로, 공유되길 원하는 페이지 컴포넌트와 같은 폴더에 'layout.js'로 생성
• Root Layout은 'app' 디렉토리의 최상단에 있어야하고, 모든 route에 적용됨

Dynamic Routes

• 동적으로 URL이 변경되어야 하는 경우, '[...]'를 사용하여 동적 라우팅을 구현할 수 있음

Meta Data

• 'layout.js'나 'page.js'에서 현재의 title, description 등 메타 태그를 쉽게 수정 가능
• 정적 또는 동적인 경우에 따라 메타데이터를 설정할 수 있음
• 예시: 메타데이터 설정과 동적 메타데이터 생성 함수 활용

Page Navigation

• 'next/link' 또는 'next/router'를 사용하여 페이지 간 이동 가능
• 'useRouter'는 클라이언트 컴포넌트에서만 사용 가능하므로, 서버 컴포넌트에서는 ''use client''를 추가하여 클라이언트 컴포넌트로 만들어줘야 함

API Routes

• 'app' 디렉토리 아래에 생성 가능
• HTTP 메서드에 따라 각각의 handler를 작성하여 API 역할을 수행
• 동적 API Route도 지원됨

Pages Router vs. App Router

• 'Pages Router': 데이터를 가져오는 데에 'getServerSideProps', 'getStaticProps' 등의 특별한 함수를 사용하며, 페이지 단위로 데이터를 가져옴
• 'App Router': 컴포넌트 단위로 데이터를 가져올 수 있음

Data Fetching Methods

1. 'getServerSideProps' (SSR):

• 서버 측에서 렌더링되며, 매 요청마다 실행됨
• 'fetch(URL, { cache: 'no-store' })'와 같이 사용

2. 'getStaticProps' (SSG):

• 빌드 시에 데이터를 불러오고 해당 데이터로 페이지를 렌더링함
• 'fetch(URL)'와 같이 사용

3. 'getStaticProps' (ISR - Incremental Static Regeneration):

• 정적 생성 후 일정 시간마다 재생성됨
• 'fetch(URL, { next: { revalidate: 10 } })'와 같이 사용

Styling

• 'App Router'에서는 Tailwind CSS를 권장
• CSS-in-JS 방식은 클라이언트 컴포넌트에서만 사용 가능
• Tailwind CSS는 기본 설정에서도 사용 가능하며, Server Component에서도 지원
• App Router를 사용하는 경우, Tailwind CSS나 Next.js에서 기본으로 제공하는 CSS Modules 방식을 권장

Middleware (미들웨어)

• 앱 사이에 위치한 소프트웨어로, 특정 페이지로 이동하여 요청을 보낼 때, 그 요청에 대한 응답을 받기 전에 미들웨어를 통해 다양한 작업을 수행하는 것.

Middleware (미들웨어)의 활용 예시

• 비로그인 유저 제한: request에 존재하는 cookie를 검사하여 비로그인 유저를 확인
• Redirect: 특정 URL을 서버에서 바로 리다이렉트
• Rewrite: 특정 URL을 보여주면서 다른 페이지를 보여주고 싶을 때 사용

import { NextResponse } from 'next/server'

export function middleware(request) {
  return NextResponse.redirect(new URL('/home', request.url))
}

export const config = {
  matcher: '/about/:path*',
}

배포

• Next.js는 Vercel에서 만든 프레임워크

Vercel을 이용한 배포

• GitHub에 Push하는 것만으로 손쉽게 배포 가능
• Vercel은 Next.js 앱을 쉽게 호스팅하고 관리할 수 있는 플랫폼으로, 자동으로 빌드 및 배포 프로세스를 처리함
• 간단한 설정만으로 효율적인 배포를 가능케 함