Moostock(3) - Next.js 라우팅 (not found routes, Dynamic routes, layout 등등..)

오늘은 Next js의 라우팅 하는 방법에 대해 알아보겠다

 

노마드 선생님의 무료 강의를 듣고 내가 필요하고 중요하다고 생각하는 부분들을 정리해 보겠다

 

혹시나 틀린 정보가 있으면 댓글에 남겨주시길...

---

기본 라우팅

 

next js를 배우다 보면 참 편리한 점들이 많은거 같다

 

라우팅을 공부하면서도 그런점을 많이 느꼈는데 

 

일단 vue에서는 router.js에서 라우터를 관리하고

 

리액트에서는 app.js에서 라우터 설정을 해줬던거 같다

 

근데 Next에서는 폴더를 만들어서 그 안에 page.tsx 파일을 만들면

 

그 폴더명이 url이 된다 

 

누가 생각해낸 아이디어인지 정말 참신한 방법이다

 

이게 말로만 해서는 잘 이해가 안될거다 

일단 app 폴더 바로 밑에 있는 page.tsx는 '/' 이 Url로 갔을때 나타날 페이지 이고

 

예시처럼 app 폴더안에 chart 폴더 안에 page.tsx를 만들면

 

'/chart'로 가면 chart안에 있는 page.tsx 가 렌더링 된다

따로 Url을 설정하지 않고 이렇게 라우팅을 할 수 있다니 정말 참신하고 기발한 방법이다

 

만약 '/chart/test'로 Url을 만들고 싶다?

 

그럼 chart 폴더 안에 test 폴더를 만들고 그 안에 page.tsx 파일을 만들면 된다

 

So Easy 하다

---

Not-found page

 

거의 대부분의 사이트가 존재하지 않는 url에 대해서는 Not-found page를 보여준다

 

이것 역시 아주 간단한데

 

app 폴더 밑에 

 

not-found.tsx 파일을 만들고 그 안에 내용을 넣으면 된다

export default function NotFound() {
  return <h1>Not Found!!</h1>;
}

이렇게 작성을 했다 치고  존재하지 않는  아무 url이나 들어가면

다음과 같이 아주 잘 나오는 것을 볼 수 있다

 

이것 역시 매우 간단하고 편하다.

 

---

 

Dynamic routes

 

다음은 동적 라우팅이다

 

위에서 설명한 라우팅 외에도 url 이 내가 원하는 값에 따라 변하는

vue나 리액트에서

/chart/:label 

와 같은 동적 라우팅을 하고싶으면 어떻게 해야할가

 

이것도 매우 간단하다

 

폴더명을 대괄호 [] 로 감싸주면 된다

 

즉 chart 파일 아래에 [label]로 폴더를 만들고 그 안에 page.tsx 파일을 만들면 된다

 

근데 여기까지 하면 끝이 아니라 당연히 저 label값을 가져와서 쓸줄도 알아야한다

 

그건 어떻게 하냐면

export default function Label({
  params: { label },
}: {
  params: { label: string };
}) {
  return (
    <div>
      <h1>라벨 : {label}</h1>
    </div>
  );
}

 

이런식으로 params를 받아오면 쓸 수 있다

다음과 같이 잘 나오는것을 확인할 수 있다

 

---

layout

 

지금까지 page.tsx 파일은 잘 써왔고 뭔지 알겠는데

 

layout 이건 뭐하는걸가 싶었다

 

보통의 웹 페이지는 거의 모든 페이지에서 보이는 헤더나 푸터가 있기 마련이다

 

vue에서는 app.vue에서 헤더나 푸터같은 공통적인 부분을 넣어주면 됐고

 

react 에서도 app.js(혹은 app.ts?) 에 넣어주면 됐다

 

근데 Next에서는 아무리 찾아봐도 그러한 app.~ 을 볼수 없다

 

이때 그러한 역할을 하는게 바로 layout.tsx이다

 

예를들어 navigation을 다음과 만들고 모든 페이지에서 보여주고 싶다고 가정하면

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <Link href="/"> Home</Link>
        </li>
        <li>
          <Link href="/chart">현재가</Link>
        </li>
      </ul>
    </nav>
  );
}

이런식으로 작성해주고 app폴더 밑에있는 layout.txs를

다음과 같이 작성해주면 된다

결과 화면을 보면

다음과 같이 모든 페이지에서 Navigation이 잘 보이는것을 확인 할 수 있다

 

이렇게 헤더나 푸터등의 공통적인 부분이 필요할때 layout을 사용하면 되는데

 

app 폴더 말고 다른 url에도 똑같이 만들어서 다양하게 활용이 가능하다

 

 

그리고 레이아웃 폴더를 보면 metadata 라고 정의된것을 볼 수 있는데

 

이 부분은 사이트의 Title과 description부분을 바꿀 수 있는 부분이다

vue 기준으로는 index.html에서 수정을 했던거 같은데 이 부분도 아주 간단히 변경이 가능하고

템플릿 형식으로도 가능하다고 한다

 

그리고 이건 아마 내 추측인데 이 부분이 그냥 React와 다르게 SEO에 유리한 부분이지 않을가 싶다

 

어쨌든 metadata부분은 지금 나는 당장 중요하진 않아서 패스 하겠다

 

---

오늘은 Next js 의 routing에 대해 배워봤다

 

정말 간단하고 편하기도 하고 참신해서 재밌게 배웠던거 같다

 

이제 라우팅 하는 방법도 알았으니 다음엔 메인페이지를 구상하고 꾸며보는 작업을 해봐야겠다