extendPagesNuxt에서는 app/pages 디렉터리의 파일 구조를 기반으로 라우트가 자동으로 생성됩니다. 하지만 이러한 라우트를 커스터마이징해야 하는 상황이 있을 수 있습니다. 예를 들어, Nuxt에서 생성하지 않는 동적 페이지에 대한 라우트를 추가하거나, 기존 라우트를 제거하거나, 라우트 구성을 수정해야 할 수 있습니다. 이러한 커스터마이징을 위해 Nuxt는 extendPages 기능을 제공하며, 이를 통해 페이지 구성을 확장하고 변경할 수 있습니다.
import { createResolver, defineNuxtModule, extendPages } from '@nuxt/kit'
export default defineNuxtModule({
setup (options) {
const { resolve } = createResolver(import.meta.url)
extendPages((pages) => {
pages.unshift({
name: 'prismic-preview',
path: '/preview',
file: resolve('runtime/preview.vue'),
})
})
},
})
function extendPages (callback: (pages: NuxtPage[]) => void): void
callback: 페이지 구성을 인자로 받아 호출되는 함수입니다. 이 배열에 요소를 추가, 삭제 또는 수정하여 변경할 수 있습니다. 참고: 제공된 pages 배열을 직접 수정해야 하며, 복사한 배열에 대한 변경 사항은 구성에 반영되지 않습니다.
| Property | Type | Required | Description |
|---|---|---|---|
name | string | false | 라우트의 이름입니다. 프로그래밍 방식 내비게이션 및 라우트 식별에 유용합니다. |
path | string | false | 라우트의 URL 경로입니다. 설정하지 않으면 Nuxt가 파일 위치에서 추론합니다. |
file | string | false | 라우트의 컴포넌트로 사용될 Vue 파일의 경로입니다. |
meta | Record<string, any> | false | 라우트에 대한 사용자 정의 메타데이터입니다. 레이아웃, 미들웨어 또는 내비게이션 가드에서 사용할 수 있습니다. |
alias | string[] | string | false | 라우트에 대한 하나 이상의 별칭 경로입니다. 여러 URL을 지원하는 데 유용합니다. |
redirect | RouteLocationRaw | false | 라우트에 대한 리다이렉트 규칙입니다. 이름 있는 라우트, 객체 또는 문자열 경로를 지원합니다. |
children | NuxtPage[] | false | 레이아웃 또는 뷰 중첩을 위한 이 라우트 아래의 중첩 자식 라우트입니다. |
extendRouteRulesNuxt는 Nitro 서버 엔진을 기반으로 합니다. Nitro를 사용하면 리다이렉트, 프록시, 캐싱, 라우트에 헤더 추가와 같은 작업에 유용한 고수준 로직을 구성에 직접 포함할 수 있습니다. 이 구성은 라우트 패턴을 특정 라우트 설정과 연결하는 방식으로 동작합니다.
import { createResolver, defineNuxtModule, extendPages, extendRouteRules } from '@nuxt/kit'
export default defineNuxtModule({
setup (options) {
const { resolve } = createResolver(import.meta.url)
extendPages((pages) => {
pages.unshift({
name: 'preview-new',
path: '/preview-new',
file: resolve('runtime/preview.vue'),
})
})
extendRouteRules('/preview', {
redirect: {
to: '/preview-new',
statusCode: 302,
},
})
extendRouteRules('/preview-new', {
cache: {
maxAge: 60 * 60 * 24 * 7,
},
})
},
})
function extendRouteRules (route: string, rule: NitroRouteConfig, options?: ExtendRouteRulesOptions): void
route: 매칭할 라우트 패턴입니다.
rule: 매칭된 라우트에 적용할 라우트 규칙 구성입니다.
options: 라우트 구성에 전달할 객체입니다. override가 true로 설정되면 기존 라우트 구성을 덮어씁니다.
| Name | Type | Default | Description |
|---|---|---|---|
override | boolean | false | 라우트 규칙 구성을 덮어씁니다. 기본값은 false입니다. |
addRouteMiddleware모든 라우트 또는 특정 라우트에서 사용할 수 있도록 라우트 미들웨어를 등록합니다.
라우트 미들웨어는 플러그인에서도 addRouteMiddleware 컴포저블을 통해 정의할 수 있습니다.
import { addRouteMiddleware, createResolver, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
setup () {
const { resolve } = createResolver(import.meta.url)
addRouteMiddleware({
name: 'auth',
path: resolve('runtime/auth'),
global: true,
}, { prepend: true })
},
})
export default defineNuxtRouteMiddleware((to, from) => {
// isAuthenticated()는 사용자가 인증되었는지 확인하는 예시 메서드입니다.
if (to.path !== '/login' && isAuthenticated() === false) {
return navigateTo('/login')
}
})
function addRouteMiddleware (input: NuxtMiddleware | NuxtMiddleware[], options?: AddRouteMiddlewareOptions): void
input: 다음 속성을 가진 미들웨어 객체 또는 미들웨어 객체 배열입니다:
| Property | Type | Required | Description |
|---|---|---|---|
name | string | true | 미들웨어의 이름입니다. |
path | string | true | 미들웨어의 파일 경로입니다. |
global | boolean | false | true로 설정하면 모든 라우트에 미들웨어를 적용합니다. |
options: 다음 속성을 가진 객체입니다:
| Property | Type | Default | Description |
|---|---|---|---|
override | boolean | false | true이면 동일한 이름의 미들웨어를 교체합니다. |
prepend | boolean | false | true이면 기존 미들웨어보다 앞에 미들웨어를 추가합니다. |