Nuxt에서 커스텀 404 페이지 보여주기

Nuxt 프레임워크는 내부적으로 자체적인 404 페이지를 제공한다. 꽤 깔끔한 디자인이지만, 애플리케이션의 404 페이지 컴포넌트를 예쁘게 만들어 두었다면 굳이 사용하고 싶지 않을 것이다.

정성들여 예쁘게 개발한 404 페이지를 보여주기 위해 리디렉션을 처리하는 방법이 여러 가지 있겠지만, 두 가지 간단한 방법을 소개하려고 한다.

먼저, 가장 단순하게도, 존재하지 않는 페이지 라우트를 모두 캐치하는 방식이 있다.

현재 최신의 Nuxt 프레임워크는 페이지 라우터(디렉터리 방식의 라우터) 방식으로 페이지를 보여주고 있다. 또한, 동적 라우트를 파일명만 설정하여 손쉽게 받을 수도 있다. (ex. [id].vue)

이를 달리 생각해보면, 사용하는 페이지 라우트 이외의 라우트를 모두 캐치하는 동적 파라미터 페이지를 만들어 404 페이지를 보여주면 된다는 이야기도 된다.

// pages/[...slug].vue

<template>
  /* HTML 코드 */
</template>

<script>
  /* 스크립트 코드 */
</script>

<style lang="scss" scoped>
  /* 스타일 코드 */
</style>

pages/[…slug].vue 컴포넌트를 둘 때, 존재하는 페이지 및 컴포넌트가 매칭되는 라우트가 아니라면, 이 페이지 라우트에서 동적으로 모두 잡히게 된다.

Subscribe

그렇지만 이 방식은 최상위에서 동적 라우트를 사용할 일이 있다면 적용하기 어렵다. Nuxt 프레임워크는 이를 위해서 미들웨어에서 쉽게 라우트를 설정할 수 있는 API를 제공하고 있다. 이 방법을 이용하면 훨씬 안전할 뿐더러, 원하는 페이지 및 라우트로 리디렉션 시키기도 쉽다.

// middleware/error-not-found.global.ts

export default defineNuxtRouteMiddleware((to, from) => {
  const router = useRouter()

  const { matched } = router.resolve(to.fullPath)

  if (!matched.length) {
    return navigateTo('/404', { replace: true })
  }
})

애플리케이션 전역에서 페이지를 검사해야 할테니 global 하도록 설정을 해준다. 그리고 resolve() 함수에서 matched 배열이 비어 있는 지 확인하면 된다. 향하려는 URL에 매칭되는, 존재하는 페이지 라우트가 있다면 해당 배열의 길이는 0이 아닐 것이다. 그러므로 0인 경우에 대해 보여 주고 싶은 404 페이지의 라우트로 replace 시키면 된다.

회사에서 404 페이지에 대한 리뉴얼을 진행하며 Nuxt 프레임워크의 자체적인 404 페이지도 브랜드 정체성을 위해 정리할 필요가 있었는데, Nuxt의 미들웨어 기능을 이용하니 쉽게 처리할 수 있었다. 이 밖에도 Nuxt의 미들웨어는 다양한 유틸 기능과 활용 방법들을 제공하고 있어, 잘 활용한다면 강력한 애플리케이션을 쉽게 구현하는 데 도움이 될 수 있다.

References

https://nuxt.com/docs/guide/directory-structure/middleware https://nuxt.com/docs/api/utils/define-nuxt-route-middleware https://nuxt.com/docs/api/composables/use-router

원문