Next.js 1주차

Ultimate Next.js Course 강의와 Next.js 공식문서를 보면서 작성한 글입니다.

App Router vs. Page Router

next.js 14버전에서 둘 다 지원

	App Router	Page Router
폴더 구조	/app	/pages
라우팅 방식/선언	동적/layout.js파일	정적/컴포넌트 파일
API 라우팅	/app/api	/pages/api

Dynamic Routes

/blog/:id
파일 이름을 대괄호로 묶어주는 걸 약속으로 한다. 대괄호 안에 지정한 이름을 Page 컴포넌트의 인자로 받을 수 있다.

// app/blog/[id]/page.tsx

export default function Page({ params }: { params: {id: string} }){
	return <div>My Post: { params.id}</div>
}

Parallel Routes

라우팅 계층을 중첩 라우트로 나누어, 동일한 URL 경로 내에서 여러 컴포넌트를 병렬로 렌더링하는 기능. 특히 레이아웃이 중첩된 복잡한 페이지에서 페이지의 각 부분이 독립적으로 데이터를 로드하고 렌더링할 수 있도록 도와준다.

/app
  ├── layout.tsx          # 레이아웃 파일
  ├── [route1]
  │   ├── layout.tsx      # 특정 경로의 레이아웃 파일
  │   ├── sidebar
  │   │   └── page.tsx    # 병렬 경로의 첫 번째 컴포넌트
  │   └── content
  │       └── page.tsx    # 병렬 경로의 두 번째 컴포넌트
  └── page.tsx            # 기본 페이지

• /app/layout.js: 전체 앱에 적용되는 레이아웃
• /app/[route1]/layout.js: route1에 해당하는 경로의 레이아웃
• /app/[route1]/sidebar/page.js: 병렬 컴포넌트1
• /app/[route1]/content/page.js: 병렬 컴포넌트2

이미지

next/image 컴포넌트를 통해 이미지 최적화 기능을 제공함. 자동으로 이미지 크기 조정, 포맷 변경, Lazy Loading 등을 적용할 수 있어 성능을 향상시킴

import Image from 'next/image';

function HomePage() {
  return (
    <div>
      <Image
        src="/home.png"
        alt="homepage-main-image"
        width={500}
        height={500}
      />
    </div>
  );
}

export default HomePage;

미들웨어

미들웨어는 middleware.js 파일에 정의하며, 페이지 또는 API 경로에 적용되고, 요청이 처리되기 전에 코드를 실행할 수 있다. 인증, 로깅, 리디렉션 등의 작업을 수행할 수 있음.

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(req) {
  if (req.nextUrl.pathname.startsWith('/admin')) {
    // 인증 로직 추가
    const authenticated = checkAuth(req);
    if (!authenticated) {
      return NextResponse.redirect('/login');
    }
  }

  return NextResponse.next();
}

function checkAuth(req) {
  // 인증 검증 로직
  return true; 
}

SSG(Static Site Generation)

• 새로 고침해도 바뀌지 않음
• 빌드 시점에 모든 페이지를 정적으로 생성하여 서버에 배포하는 방식
• 빌드 과정에서 HTML 파일이 생성되므로, 사용자 요청 시 서버가 아닌 클라이언트에 직접 HTML을 제공하여 매우 빠른 응답 속도를 보장
• 서버 부하를 줄이고, 보안 및 성능을 극대화
• 주로 내용이 자주 변경되지 않는 블로그, 문서, 마케팅 페이지 등에 적합

ISR(Incremental Static Regeneration)

export const revalidate = 5; // 5초마다 바뀜(prod 모드)

export default async function Home() {
	return (
      <main>
      	<div>{Date.now()}</div>
      </main>

}

• 정적 페이지를 생성할 때 일정 주기마다 페이지를 재생성하여 최신 데이터를 반영할 수 있음. revalidate 속성 사용
• 정적 페이지를 빌드 후 특정 시간 간격으로 재생성하여 최신 데이터를 반영할 수 있도록 하는 기능
• 주기적인 데이터 업데이트가 필요한 블로그나 뉴스 사이트에 적합
• dev 모드로 실행할 경우 사용자가 진입할 때마다 getStaticProps가 실행되기 때문에 prod 모드에서 확인 가능.
• 새로고침할 때마다 바뀌게 하고 싶다면 revalidate 대신 dynamic 사용

export const dynamic = "force-dynamic"

• 또는 cookies 사용

import {cookies } from 'next/headers'

export default async function Home() {
  	cookies();
  
	return (
      <main>
      	<div>{Date.now()}</div>
      </main>
}

SSR(Server Side Rendering)

• 사용자 요청이 있을 때마다 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식
• 매 요청마다 최신 데이터를 반영할 수 있으며, 초기 로딩 속도를 높이고 SEO를 개선하는 데 효과적이며, getServerSideProps 함수를 사용하여 서버 사이드에서 데이터를 페칭하고 페이지를 렌더링할 수 있다.
• 주로 사용자별로 동적인 콘텐츠를 제공해야 하는 대규모 웹 애플리케이션, 이커머스 사이트 등에 적합