손에 익는 Next.js
Part 1 - 공식 문서 훑어보기
Part 1 - 공식 문서 훑어보기
  • 왜 Next.js를 배우는가?
    • 1️Next.js가 세상에 있기까지
    • 2️Next.js를 배우는 이유
  • Next.js 기본 배우기
    • 1️Next.js는 무엇인가?
    • 2️Next.js 13
    • 3️서버 컴포넌트
    • 4️라우팅
    • 5️페이지 간 이동
    • 6️스타일링
    • 7️데이터 페칭
    • 8️메타데이터
  • Next.js 손에 익히기
    • 1️프로젝트 소개
    • 2️프로젝트 환경 설정
    • 3️페이지 구성하기
    • 4️페이지 간 이동하기
    • 5️페이지 스타일 입히기
    • 6️날씨 API 사용하기
    • 7️날씨 데이터 조회하기
    • 8️메타데이터 다루기
    • 9️서비스 배포하기
  • 마치며
    • *️후속 강의에 대하여
Powered by GitBook
On this page
  • 폴더 이름을 따르는 URL Path
  • 상황에 따라 짓는 파일 이름
  • 동적으로 변할 수 있는 URL Path 만들기
  1. Next.js 기본 배우기

라우팅

Previous서버 컴포넌트Next페이지 간 이동

Last updated 1 year ago

라우팅(Routing)은 우리말로 풀어쓰면 '경로 지정하기'라고 부르면 적절하지 않을까요. 웹 어플리케이션에서 경로란 URL Path를 의미합니다. Next.js에선 파일 시스템 기반으로 경로를 지정합니다. 무슨 의미인지 살펴보겠습니다.

폴더 이름을 따르는 URL Path

Next.js의 파일 시스템 기반의 라우팅은 아래와 같은 형태를 이룹니다. app이라는 폴더를 만들고 그 아래 dashboard, settings라는 폴더를 만들면 URL path가 폴더 이름과 동일한 순서를 따라 만들어집니다.

다만, Next.js에서는 라우트를 표현하는 폴더인 경우엔 라우트 세그먼트(Route Segment)라고 부릅니다.

루트 라우트 세크먼트 이름을 app이라고 지으면 App Router, pages라고 지으면 Pages Router가 됩니다. 쉽죠? 이번 강의에서는 App Router를 기준으로 진행한다고 말씀드렸으니 app이라는 이름으로 라우트 세그먼트 이름을 지으면 되겠네요.

상황에 따라 짓는 파일 이름

세그먼트에는 파일이 필요합니다. Next.js에서는 상황에 맞는 UI를 정의할 때 쓰는 파일명이 미리 정해져있습니다.

세그먼트의 메인 컨텐츠와 하위 세그먼트의 공용 레이아웃 UI

세그먼트의 메인 컨텐츠 UI

세그먼트의 메인 컨텐츠와 하위 세그먼트의 로딩 UI

세그먼트의 메인 컨텐츠와 하위 세그먼트의 Not Found UI

세그먼트의 메인 컨텐츠와 하위 세그먼트의 에러 UI

전역 에러 UI

서버 API 엔드포인트

특별하게 재사용될 수 있는 레이아웃 UI

패러럴 라우트의 폴백 UI

아래의 이미지를 보시면 이해가 쉽습니다. 파일 이름을 약속된대로 지정해서 세그먼트 안에 정의하면 Next.js가 알아서 React 컴포넌트를 배치해주는거죠.

위에서 언급한 파일명 이외에는 아무 이름이나 넣어도 라우트에 영향을 주지 않습니다. 필요에 따라 다양한 파일을 추가해도 괜찮다는 의미죠.

동적으로 변할 수 있는 URL Path 만들기

Dynamic Routes는 파일 이름을 대괄호로 묶어주는 걸 약속으로 합니다. 대괄호 안에 지정한 이름을 Page 컴포넌트의 인자로 받을 수 있습니다.

app/blog/[id]/page.tsx
export default function Page({ params }: { params: { id: string } }) {
  return <div>My Post: {params.id}</div>
}

참고 자료

블로그를 만든다고 가정하면 게시글마다 ID 혹은 이름을 갖습니다. 블로그 상세 페이지라면 /blog/:id 와 같은 형태를 갖는 것이죠. 이런 경우를 위해 Next.js에서는 라는 기능을 제공합니다.

4️
Dynamic Routes
https://nextjs.org/docs/app/building-your-application/routing
layout
page
loading
not-found
error
global-error
route
template
default
출처:
출처:
https://nextjs.org/docs/app/building-your-application/routing/defining-routes#creating-routes
https://nextjs.org/docs/app/building-your-application/routing#component-hierarchy