[Next] Next.js 13 라우팅 (2)

공식 문서

1. Routes Group

중첩된 폴더들을 그룹화해서 폴더 구조는 유지하고 URL 경로에는 포함되지 않게 하는 기능을 제공한다.

사용방법은 폴더명을 괄호로 묶어서 (forderName) 이런식으로 폴더를 생성하면 된다.

 

위처럼 설정하면 상위 폴더인 marketing과 shop 폴더가 URL에서 생략되고 그 아래 /about /blog /accout 가 URL에 표시되며

실제는 (marketing)/about/page.js, (marketing)/blog/page.js 이렇게 동작하게 된다.

 

2. Dynamic Routes

정확한 segment를 알 수 없을 때 동적 데이터로부터 라우트를 생성할 수 있으며 생성방법은 폴더 생성할 때 대괄호로 묶어서 [fornerName] 폴더 이름을 넣으면 된다. 

 

사용 방법은 만약 블로그 게시물에 대한 경로를 생성한다고 할 때 게시물을 나타낼 때 app/blog/[slug]/page.js 이렇게 경로를 생성할 수 있다.

[slug]는 블로그 게시물의 식별자를 나타내는 동적 세그먼트로, id라고 생각하면 된다.

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

 

1) Catch-all 세그먼트

유연하게 동적 경로를 만들어주는 기능으로, 폴더 이름 앞에 ...을 추가해서 [...forderName] 으로 적용할 수 있다.

예를 들어 /app/shop/[...slug]/page.js 경로는 /shop 다음에 오는 모든 경로 /shop/a, /shop/a/b, /shop/a/b/c 등과 일치시킬 수 있고,

slug의 파라미터는 ['a'], ['a', 'b'], ['a', 'b', 'c']가 된다.

 

2) Optional Catch-all 세그먼트

위에 Catch-all 세그먼트를 선택적으로 적용할 수 있으며 폴더 생성 시 [[...forderName]]으로 적용한다.

예를 들어 /app/shop/[[...slug]]/page.js 경로는 똑같이 /shop 다음에 오는 모든 경로를 일치시키는데 위와 다른점은

라우트의 경로에 파라미터가 없어도 매치 된다는 점

그냥 /shop 은 파라미터가 없기 때문에 slug는 빈 배열이 된다.

 

3. 미들웨어

미들웨어란? 요청과 응답 사이에 코드를 실행할 수 있게 해주며 들어오는 요청에 대해 응답을 수정, 리다이렉트, 요청, 응답헤더 변경, 직접 응답하는 등의 작업을 할 수 있다.

 

사용 방법은 root 디렉터리에 middleware.ts 또는 js 파일을 만들어서 정의한다.

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// 비동기 작업을 위해 'await'을 사용하려면 async로 표시할 수 있다.
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
export const config = {
  matcher: '/about/:path*',
}

요청을 처리할 middleware함수를 만들고 그 함수 내에 원하는 작업을 작성하면 되는데 위 코드는 '/home'으로 리다이렉트 하게 된다.

config 객체에 matcher 속성을 이용해서 어떤 경로에 어떤 미들웨어를 적용할지 설정할 수 있다.

 

여기서 matcher는 특정 경로에서 미들웨어를 실행할 수 있도록 필터링하는 역할을 한다.

경로는 반드시 '/'로 설정하고, 지정한 매개변수를 ':'를 이용해서 사용할 수 있다.

매개변수를 사용할 때 수식어를 붙일 수 있는데 '*'는 0개 이상(아무것도 없거나 여러개)의 문자열, '?'는 0 또는 1개 문자열, '+'는 1개 이상 문자열을 매치한다.

 

예를 들어 /about/:path*는 /about 다음에 어떤 문자열이든 여러개가 올 수 있지만 없어도 매치된다.

/about/:path? 는 /about 다음에 1개 또는 아무것도 없어도 매치 된다.

/about/:path+ 는 /about 뒤에 최소한 하나의 문자열이 와야한다.

 

또한 괄호()를 사용한 정규식을 사용할 수 있는데 /about/(.*)는 /about/:path 와 같다.

 

1) 단일 경로

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

/about 경로와 하위 경로에 미들웨어를 적용하는데 :path*는 와일드카드로 /about 뒤에 어떤 문자열이든 올 수 있다

 

2) 여러 경로

export const config = {
  matcher: ['/about/:path*', '/dashboard/:path*'],
};

/about 경로와 하위 경로, /dashboard 경로와 하위 경로에 미들웨어 적용할 수 있도록 배열을 사용한다.

 

3) 정규식 사용

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

api, 정적 파일, 이미지 파일, 파비콘을 제외한 모든 요청 경로에 미들웨어 적용하는 코드로, 위처럼 정규식을 사용할 수 있다.