[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기- Next.js 기본 (라우팅 정리 - App Router, 라우트 설정, 라우팅하기, 라우팅 파라미터)

💡 용어 정의

라우팅

• 라우팅은 사용자가 요청한 URL에 따라 어떤 페이지를 보여줄지를 결정하는 과정입니다.
• Next.JS는 앱 라우팅 / 페이지 라우팅을 사용하여 URL 경로와 페이지 파일을 직접 연결합니다.
• 예를 들어서 사용자가 ‘/about’ 경로를 입력하면, Next.JS는 해당 경로와 맞는 페이지를 표시합니다.
• 일종의 행위

라우터(Router)

• 라우터는 이러한 라우팅을 관리하고 처리하는 기능을 제공하는 도구입니다.
• Next.JS에서는 페이지 라우터는 ‘next/router’, 앱 라우터는 ‘next/navigation’가 라우터 관리 도구입니다.
• 우리는 해당 도구에서 제공하는 여러 가지 훅, 컴포넌트를 사용하여 페이지를 탐색합니다.
• 일반적으로 라우터는 사용자의 URL을 해석하고 해당 URL에 맞는 컴포넌트를 렌더링합니다.

라우트(Route)

• 라우트는 URL과 특정 컴포넌트 간의 매핑을 나타냅니다.
• 라우트는 일반적으로 페이지의 경로와 해당 경로에 표시할 컴포넌트를 정의하는 데 사용됩니다.
• 리엑트에서는 router/index.ts 파일에서 라우트를 정의했습니다.

 

💡 App Router

정의

Next.js 14에서 새롭게 도입된 라우팅 시스템입니다. 그전에는 페이지 라우터(pages)였습니다.

 

💡 라우트 설정

기본

앱 라우터는 루트에 app 폴더를 생성하면 자동으로 라우트가 생성됩니다. 예를 들어서 app 폴더 하위에 blog 페이지를 만들고 page.tsx 컴포넌트를 생성하면 /blog에 매핑되는 라우트가 설정됩니다.

app/
├── blog/
│   └── page.tsx --- /blog
├── about/
│   └── page.tsx --- /about

중첩(Nested Route)

특정 폴더 안에 새로운 폴더를 중첩하는 형태로 중첩 경로 지정이 가능합니다.

app/
└── blog/
    ├── page.tsx - /blog
    └── first/
        └── -page.tsx -- /blog/first

다이나믹 경로

동적(dyamaic) 경로를 사용하면 특정 세그먼트가 동적으로 변경되는 경로를 지정할 수 있습니다.

app/
└── blog/
    ├── page.tsx - /blog
    └── [id]/
        └── page.tsx -- /blog/1 or /blog/2 or /blog/3...

중첩 다이나믹 경로

동적 경로도 중첩이 가능합니다.

app/
└── blog/
    ├── page.tsx - /blog
    └── [id]/
        ├── page.tsx -- /blog/1 or /blog/2 or /blog/3...
        └── comment/
            └── [reviewId]/
                └── page.tsx. -- /blog/2/comment/1

포괄적 경로 (catch all segments)

특정 경로 이하의 모든 경로를 포괄적으로 허용하는 라우트 지정 방식을 말합니다.

app/
└── docs/
    └── [...slug]/
        └── page.tsx - /docs/1 or /docs/1/api or /docs/1/api/1 등등 모든 경로 커버 가능

const Docs = ({
  params,
}: {
  params: {
    slug: string[];
  };
}) => {
  console.log(params); // /docs 이후의 경로가 배열로 들어감 ex_/docs/1/user/1 -> [1, user, 1]
  return (
    <>
      <h1>Docs Component</h1>
    </>
  );
};
export default Docs;

그룹

앱 라우터는 폴더를 생성하는 즉시 라우트 경로에 반영이 됩니다. 단, 소괄호로 생성한 폴더 안에 넣어두게 되면 소괄호는 경로에 인식되지 않습니다.

app
  (home)
    page.tsx --- /
  (auth)
    login
      page.tsx --- /login
    register
      page.tsx --- /register

프라이빗 폴더

폴더에 언더스코어를 붙이면 라우팅을 통해 접근할 방법이 없습니다.

app
  _utils
    page.tsx - 접근 불가
    form-date.ts

 

 

💡 라우팅 하기

1. Link 컴포넌트

리액트와 다르게 to 속성이 아닌 것에 주의해야 합니다.

import { Link } from 'next/Link'
<Link href="/">Home</Link>

2. useRouter()

Next.JS에서 제공하는 여러 가지 훅을 사용해서 라우팅을 처리할 수 있습니다.

종합

import { useRouter } from 'next/router';

const NavigationComponent = () => {
  const router = useRouter();

  return (
    <div>
      <button onClick={() => router.back()}>Go Back</button> // 브라우저 뒤로가기
      <button onClick={() => router.forward()}>Go Forward</button> // 브라우저 앞으로가기
      <button onClick={() => router.push('/about')}>Go to About</button> // 브라우저 URL 이동(기록O)
      <button onClick={() => router.replace('/about')}>Replace to About</button> //브라우저 URL 이동(기록X)
      <button onClick={() => router.refresh()}>Refresh Page</button> // 브라우저 새로고침
    </div>
  );
};

export default NavigationComponent;

 

 

💡 라우팅 파라미터

1. usePathname()

현재 라우팅의 경로를 반환하는 훅입니다.

"use client";
import { usePathname } from "next/navigation";
export default function Product() {
  const pathname = usePathname();
  console.log(pathname); // <http://localhost:3000/products> -> /products
  return (
    <>
      <h1>Product Component</h1>
    </>
  );
}

2. useSearchParams()

queryString 문자열을 가져올 때 사용하는 훅입니다.

"use client";

import { useSearchParams } from "next/navigation";

export default function Product() {
  const searchParams = useSearchParams();
  console.log(searchParams.get("id")); // <http://localhost:3000/products?id=1> -> 1
  return (
    <>
      <h1>Product Component</h1>
    </>
  );
}

3. Param props

페이지 컴포넌트에 기본으로 전달되는 params 옵션 속성을 사용하면 동적 세그먼트를 받을 수 있습니다.

type TProps = {
  params: {
    id: string;
  };
  searchParams: {
    lang: string;
  };
};

export default function ProductDetail(params: TProps) {
  // <http://localhost:3000/products/1> -> {id: 1}
  console.log(params); //{ params: { id: '1' }, searchParams: { lang: 'ko' } }
  console.log(params.params.id); // 1
  console.log(params.searchParams.lang); // ko
  return (
    <>
      <h1>ProductDetail Component</h1>
    </>
  );
}