[next.js] 다이나믹 라우팅이 안될 때

파일 기반 라우팅 시스템에 익숙하지 않거나 잘못 이해하게 되면 라우팅 사용시 오류가 발생할 수 있습니다.

아래의 경우에 따라서 문제가 발생할 수 있으며 하고있는 프로젝트에 동일한 문제가 발생하고 있는지 체크하여 위 라우팅 문제를 방지할 수 있습니다.

 

 

1. 파일 및 폴더명 규칙 무시: Next.js의 파일 기반 라우팅은 페이지를 생성할 때 파일 및 폴더 이름을 사용합니다. 파일 이름에 불필요한 문자를 포함하거나, 필요한 문자를 누락하는 경우, 이로 인해 예상치 못한 라우팅 오류가 발생할 수 있습니다.

 예를 들어, **pages/post/[id].js**라는 파일을 만들었을 때, 이 파일은 post/1, post/2와 같이 동적 라우트를 생성합니다. 만약 대괄호([, ])를 누락하여 **pages/post/id.js**라고 만든다면, 이 파일은 **post/id**라는 정적 라우트를 생성하게 되어, 예상한 대로 동작하지 않게 됩니다.

 

2. 동적 라우팅에서 파라미터 값 누락: Next.js에서 동적 라우팅을 사용할 때, 라우트의 파라미터를 잘못 다루는 경우도 있습니다. 예를 들어, 위의 예에서 post/[id] 라우트를 사용하면서 **getServerSideProps**나 **getStaticProps**에서 해당 id 값을 잘못 가져오거나 사용하면, 이로 인해 오류가 발생할 수 있습니다.

export async function getServerSideProps(context) {
  const { id } = context.params; // 이 부분에서 id 값을 잘못 가져오거나 사용하는 경우
  const data = await fetchPostData(id);

  return {
    props: {
      post: data,
    },
  };
}

 

3. 파일 또는 폴더 경로 오류: 프로젝트의 파일 또는 폴더 구조가 복잡해질수록, 간혹 파일의 위치를 잘못 파악해 라우팅 오류를 일으키는 경우가 있습니다. 예를 들어, pages/blog/index.js 파일을 **pages/index.js**로 잘못 이동시킨다면, blog 라우트에 접근할 수 없게 됩니다.

4. 중첩 라우팅 오류: 페이지 내부에 페이지를 중첩해서 구성하거나 페이지를 중첩하려고 할 때 오류가 발생할 수 있습니다. Next.js는 페이지 내부에 또 다른 페이지를 중첩하는 것을 지원하지 않습니다. 이로 인해 예상치 않은 라우팅 문제가 발생할 수 있습니다.

pages/
  blog/
    [id].js
    comments/
      [commentId].js

**blog/[id]/comments/[commentId]**와 같은 라우트를 기대할 수 있지만, Next.js에서는 이런 구조를 지원하지 않습니다.

5. Link 컴포넌트 오류: Next.js의 Link 컴포넌트를 사용하여 내부 라우팅을 수행할 때, 잘못된 href 또는 as 속성값을 제공하면 문제가 발생할 수 있습니다.
예를 들어, 동적 라우트를 사용하려면 href에 파일 경로 패턴을, as에 실제 경로를 제공해야 합니다:

<Link href="/post/[id]" as="/post/1">
  <a>Post 1</a>
</Link>

위의 코드에서 as 속성을 생략하거나 잘못 제공하면 라우팅 오류가 발생합니다.
예를 들어, 동적 라우트를 사용하려면 **href**에 파일 경로 패턴을, **as**에 실제 경로를 제공해야 합니다:

 

6. 라우트 미들웨어 오류: Next.js 12 버전부터 라우트 미들웨어가 도입되었습니다. 미들웨어를 잘못 구현하면 라우팅 관련 오류가 발생할 수 있습니다. 미들웨어는 특정 라우트나 전역에서 실행되는 서버 사이드 코드로, 요청과 응답을 조작하는 데 사용됩니다.
예를 들어, 사용자를 인증하거나 리다이렉트를 수행하는 미들웨어를 작성할 수 있습니다:

// pages/_middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  if (!request.cookies.auth) {
    return NextResponse.redirect('/login');
  }

  return NextResponse.next();
}

위 코드에서 **request.cookies.auth**의 값을 잘못 검사하면, 인증되지 않은 모든 사용자가 **/login**으로 리다이렉트되어 버리는 문제가 발생할 수 있습니다.

 

 

next.js 를 사용하면서 라우팅 문제는 자주 나오는 문제로 발생하면 위 사항을 기록해두면서 문제를 해결하려고 합니다