[Next.js] 라우팅 및 페이지 렌더링

병렬 라우트 설정

별도의 경로를 가지는 라우트 두 개의 콘텐츠를 동일 페이지에서 렌더링

병렬 라우팅 설정하려면 병렬 라우트를 포함하려는 경로에 레이아웃 파일 추가

병렬 라우트마다 @로 시작하는 하위 폴더 하나 추가 -> 병렬 라우트가 두 개라면 폴더 두 개 추가

app
 ㄴ archive
 	  ㄴ @archive
      	  ㄴ page.js
      ㄴ @latest
      	  ㄴ page.js

 

일반적으로 레이아웃 컴포넌트 함수는 {children} 프로퍼티를 받는다

NextJS는 병렬 라우트 폴더와 인접해 있다면 해당 레이아웃 컴포넌트에 프로퍼티를 자동으로 추가한다

@archive 라우트 콘텐츠 => archive 프로퍼티

@latest 라우트 콘텐츠 => latest 프로퍼티

export default function ArchiveLayout({ archive, latest }) {
  return (
    <div>
      <h1>News Archive</h1>
      <section id="archive-filter">{archive}</section>
      <section id="archive-latest">{latest}</section>
    </div>
  );
}

 

동일한 페이지에 표시되는 병렬 라우트는 전부 원하는 경로를 모두 지원해야 한다!

=> default.js 파일 사용

default.js 파일은 표시할 기본 폴백 콘텐츠 정의하도록 허용하는 파일

만약 폴백 콘텐츠가 표준 콘텐츠(page.js)와 동일하다면 page.js 없애고 default.js만 남겨도 된다

 

 

Catch-All 라우트 구성

중첩 라우트 폴더명을 대괄호 두쌍 안에 ...뒤에 원하는 식별자 작성 -> [[...filter]]

내부 page.js 파일이 이후 모든 경로 세그먼트에 대해 활성화되도록 보장한다

지정한 식별자가 단일값이 아니라 모두 캐치 라우트로 상위 폴더명 이후 모든 경로 세그먼트를 캐치한다

/archive -> 세그먼트 X

/archive/2025 -> 세그먼트 하나

/arhive/2025/4 -> 세그먼트 두 개

식별자는 일치하는 모든 세그먼트의 배열을 보여주기 때문에 페이지 자체는 변하지 않는다

const filter = params.filter;

const selectedYear = filter?.[0];
const selectedMonth = filter?.[1];

 

 

서버 vs 클라이언트 컴포넌트

NextJS 애플리케이션에 있는 React 서버 컴포넌트는 서버에서만 렌더링 되기 때문에 컴포넌트 기능이 서버에서만 실행

오류 폴백 컴포넌트는 클라이언트 사이드에서 호출 가능해야 한다

훅은 대부분 작동하려면 주변에 클라이언트 컴포넌트가 필요하다

NextJS를 사용할 때 클라이언트 사이드 코드나 클라이언트 컴포넌트가 필요한 코드를 아웃소싱하는 게 좋다

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function NavLink({ href, children }) {
  const path = usePathname();
  return (
    <Link
      href={href}
      className={path.startsWith(href) ? "active" : undefined}
    >
      {children}
    </Link>
  );
}

이런 식으로 클라이언트 컴포넌트를 최대한 작게 구축하기

 

 

인터셉팅 라우트

페이지 내부 링크를 통한 탐색 여부에 따라 때때로 활성화 -> 내부 내비게이션 요청을 가로챈다

가로챌 페이지에 형제 폴더 생성 => 소괄호 쓰고 그 뒤에 가로챌 라우트 이름 반복

소괄호 사이에는 이 폴더로부터의 경로와 대표하는 경로 세그먼트를 가로챌 세그먼트를 설명해야 한다

같은 폴더 안에 있으면 점 한 개 추가 -> (.)image

같은 폴더에서 뭔가 가져오고 싶으면 -> (./파일명)image

인터셉팅 라우트가 중첩 경로 폴더 내에 설정되면 ->(..)image

페이지 도달 방법에 따라 다른 page.js 파일이 로딩

병렬 라우트와 결합할 때 유용

 

 

라우트 그룹

라우트 그룹을 통해 전용 레이아웃 설정 가능

다른 페이지 혹은 라우트에 다른 레이아웃을 설정할 때 유용

 

 

라우트 핸들러

route.js 파일을 생성하면 라우트 핸들러를 설정해야 한다

라우트 핸들러는 다양한 함수를 내보내는 파일

화면에 렌더링 되는 페이지를 반환하지 않는 라우트를 설정한다

수신되는 JSON 데이터를 수락하고 JSON 응답 반환

라우트 핸들러의 목적은 API 같은 라우트를 설정해 데이터 생성, 저장 등의 작업을 전부 수행하되 클라이언트에서 내부적으로 호출하는 것

export function GET(request){
  console.log(request);
  
  return new Response('Hello!');
}

클라이언트를 NextJS 애플리케이션과 연결할 때 특히 유용

 

 

미들웨어

app 폴더 사용 X

middleware 함수는 NextJS가 자동으로 전달하는 요청 객체를 받고 NextResponse를 반환해야 한다

NextResponse는 다양한 메서드를 호출해 인스턴스화하면 새로운 응답 생성도 가능하고 next 같은 유틸리티 메서드로 들어오는 요청을 실제 대상으로 전달도 가능

보통 미들웨어 기능은 여러 요청을 다르게 처리해 모든 종류의 요청을 검사하고 애플리케이션에서 필요에 따라 요청을 리디렉션 하는 데 사용한다

import { NextResponse } from "next/server";

export function middleware(request) {
  console.log(request);
  return NextResponse.next();
}

export const config = {
  matcher: "/news",
};