Page Router Next.js와 Nuxt.js 차이

Next.js를 학습하면서 Nuxt.js와 다른 점과 같은 점을 비교해 보면 좋을 거 같아 글을 작성해 봅니다.

 

공통점은 Pages 폴더 하위에 파일 시스템 방식으로 URL path가 정해진다는 점입니다.

예를 들어 https://localhost/book 경로를 생성하고 싶다면 다음과 같은 폴더 구조를 만들어야 합니다.

 

Next.js 경우 pages/book/index.tsx 또는 pages/book.tsx
Nuxt.js 경우 pages/book/index.vue 또는 pages/book.vue

쿼리 파라메터(Query Parameter)

https://localhost/book?q=리액트 같이 쿼라 파라메터를 넘기는 경우 사용 방법이 다릅니다.

Next.js

import { useRouter } from "next/router";
export default function Page() {
  const router = useRouter();
  const { q } = router.query;
  return <h1>book : {q}</h1>;
}

Nuxt.js

<template>
  <h1>book : {q}</h1>;
</template>
<script setup lang="ts">
const route = useRoute();
const { q } = route.query;
</script>

Nuxt.js는 useRoute, useRouter로 기능이 세분화되어 있으나 Next.js에 router의 합쳐져 있더군요.

동적 라우트

https://localhost/books/123 같이 동적 라우트를 해야 하는 경우 폴더 구조는 동일합니다.

 

Next.js pages/book/[id].tsx

Nuxt.js pages/books/[id].vue

 

그러나 사용 방법이 다릅니다.

Next.js

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  const { id } = router.query;
  return <h1>book : {id}</h1>;
}

Nuxt.js

<template>
  <h1>book : {id}</h1>;
</template>
<script setup lang="ts">
const route = useRoute();
const { id } = route.params; // params
</script>

Next.js는 동일하게 query를 통해 가져오지만 Nuxt.js 경우 params 속성을 통해 가져와야 합니다.

동적 세그먼트(Catch All Segment)

https://localhost/books/detail/123 처럼 중간에 어떤 문자열이나 숫자로 이뤄진 path를 포괄하도록 할 수 있는 방법입니다.
아직까진 실무에서는 사용해 본 적이 없습니다.

 

Next.js pages/book/[...slug].tsx

Nuxt.js pages/books/[...slug].vue

 

여러 세그먼트들이 존재하기 때문에 배열로 리턴이 됩니다.

Vue에서는 Catch All Route 또는 Unknown Routers라고 명명하고 있어서 이름에 약간의 차이가 있습니다.

Next.js

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  const { slug } = router.query;
  return <h1>book : {slug && slug[1]}</h1>;
}

Nuxt.js

<template>
  <h1>book : {slug && slug[1]}</h1>;
</template>
<script setup lang="ts">
const route = useRoute();
const { slug } = route.params;
</script>

 

Next.js 경우 [[...slug]].tsx 통해 /books 경로와 /books/detail/123 경로를 둘다 지원할수 있는 방법이 있지만
Nuxt.js 경우에는 존재하지 않아 pages/books/index.vue 와 pages/books/[...slag].vue두개의 파일을 생성해야 합니다.

라우터 그룹(Router Groups)

path에 포함시키지는 않고 묶고 싶은 경우 Next.js, Nuxt.js 괄호를 통해서 가능합니다.

https://localhost/about, https://localhost/contact

Nuxt.js 경우 pages/(marketing)/about.vue pages/(marketing)/contact.vue
Next.js 경우 Pages Router에서는 제공하지 않고 App Router에서만 제공합니다.