[Next.js] Routing using App Router

이번에는 next.js의 routing에 대해 소개를 해 드리려고 합니다.

공식 페이지를 보면 2가지 방식의 routing을 소개하고 있습니다.

이전에 사용되던 pages router보다 좀 더 편리하고 직관적으로 사용할 수 있어서 app router가 좀 더 맘에 들더라고요.

 create-next-app tool을 사용하여 프로젝트를 생성할 때, 이 기능 사용 여부를 설정할 수 있어요.

무려 recommended이죠? 😄

Page Files

이 방식의 핵심은 바로 page 파일입니다.

다시 말해, page 파일이 존재하는 경로가 바로 routing 경로가 됩니다.

 

app 폴더 아래에 blog 폴더를 생성 후, page.tsx 파일을 만들어 봅니다.

// app/blog/page.tsx

export default function Blog() {
  return <h1>Blog</h1>
}

이제, application을 실행합니다.

$ npm run dev

웹 브라우저를 실행하고, 다음의 경로로 접속해 보세요.

• http://localhost:3000/blog

알아서, Blog 페이지로 연결됐죠?

 

이런 식으로 원하는 경로에 해당하는 폴더를 만들어 안에 page.tsx 파일을 만들어 주기만 하면 바로 routing이 완성됩니다.

예상하셨겠지만, 폴더는 만들었지만, page.tsx 파일을 만들지 않았다면 404 오류가 발생합니다.

경로는 nesting이 가능하니 app/blog/category/contents/page.tsx 와 같이 중첩시켜 생성하셔도 http://localhost:3000/blog/category/contents를 통해 routing이 됩니다.

Not Found File

없는 경로에 접근할 경우, 404 not found 에러가 발생하게 되죠.

이 때, 보여줄 페이지를 만들어 줄 수 있습니다.

바로, not-found.tsx 파일을 만들어 주면 됩니다.

// app/not-found.tsx

export default function NotFound() {
  return <h1>없지롱~</h1>
}

임의로 존재하지 않는 경로에 접근을 해보시면 방금 만든 페이지가 보이는 것을 확인하실 수 있어요.

Dynamic Routes

라우팅을 만들다 보면 사용자의 요청에 따라 같은 형태로 다양한 경로에 대응해야할 경우가 생겨요.

예를 들어, 블로그 같은 경우 포스트 숫자가 경로에 붙어 각각의 포스팅 페이지로 연결되고, 쇼핑몰 같은 경우는 상품 아이디가 붙어 각각의 상품 페이지로 연결이 되는 것을 보셨을 거에요.

이것은 next.js에서 []를 이용하여 만들어줄 수 있어요.

// app/blog/[id]/page.tsx

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

요렇게 대괄호로 폴더를 만들어 page.tsx 파일을 넣어주면, 이 안에서 동적으로 routing을 해줄 수 있습니다.

다음과 같은 경로로 테스트 해보실 수 있어요.

• http://localhost:3000/blog/1234

 

추가로 query parameter도 처리해줄 수 있습니다.

// app/blog/[id]/page.tsx

export default function Post({
  params,
  searchParams,
}: {
  params: { id: string };
  searchParams: { param1: string; param2: string };
}) {
  return (
    <>
      <div>My Post: {params.id}</div>
      <div>Params: {searchParams.param1} {searchParams.param2}</div>
    </>
  );
}

params와 searchParams는 프레임워크에서 고정한 값이니 꼭 이름을 지켜주세요.

• http://localhost:3000/blog/1234?param1=hello&param2=world

형태를 보고 예상하셨겠지만, 위와 같이 테스트 해볼 수 있습니다.

Route Groups

Next.js에서는 라우팅을 그룹화 해서 보다 편리하게 관리해줄 수 있습니다.

이것은 ()를 이용해서 만들어 줍니다.

괄호로 둘러쌓인 폴더는 아무런 의미를 가지지 않고, 단지 그룹화를 위해 비슷한 종류를 묶어두는 역할만 하게 됩니다.

이렇게 괄호를 사용하여 만든 폴더는 관리를 위해 묶어주는 역할만 하고, routing에 아무런 영향을 미치지 않으므로 지금까지 동작했던 것과 완전히 동일하게 작동합니다.

Wrap Up

Next.js는 최신 framework 답게 그간 개발자들이 불편해 했던 부분들을 아주 쉽게 해결할 수 있도록 도와줍니다.

정해진 약간의 가이드만 따르면 별도의 라이브러리를 사용하지 않더라도 기본적으로 사용이 가능합니다.

이번에 소개해드린 라우팅 기능도 그 중 하나입니다.

소개해드린 것 외로도 조금 더 심화 기능들이 있긴 한데, 일단은 이 정도만 알면 나머진 충분할 듯 합니다.