NEXT.JS : Defining Routes

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

React에서 라우팅할 때는 url을 지정하고 컴포넌트 render를 요청하는 방식의 react-router를 사용했다.

//각 path에 연결된 컴포넌트로 render
path: "/" => <Home />
path: "/about" => <About />

일일이 컴포넌트와 path를 연결지어야해서 굉장히 수동적인 방식이라고 볼 수 있다.
BUT, NEXT.JS는 직접 url을 적어줄 필요가 없다!

Routes

NEXT.JS에서의 라우터는 파일시스템을 이용한다.
만약 /about이라는 경로로 라우트하고 싶다면 해당경로를 이름으로 한 파일을 생성해주면 된다.

브라우저에서 해당경로로 이동하면 404에러가 출력되는 것을 볼 수 있는데, UI를 제공하지 않았기 때문이다. 이를 해결하기 위해서는 about폴더 안에 page.tsx(jsx)파일을 만들어 넣어야한다.
url이 변경되고, 내용도 제대로 나오는 것을 볼 수 있다.

요약

각각의 폴더명을 url로 사용할 수 있다. 하지만 해당 url에 맞는 페이지를 보기 위해서는 각각의 폴더 안에 page.tsx가 있어야만 한다.

Not found

없는 경로를 url에 입력했을 때 404페이지를 만날 수 있다.
404페이지 대신 내가 원하는 디자인의 페이지를 보여주고 싶다면, app폴더 안에 not-found.tsx라는 파일을 하나 생셩하고 스타일링 해주면 된다.
not-found.tsx은 Next의 특수파일 중에 하나이며 특수파일의 종류와 기능은 공식문서에 작성되어있다.
👉🏻NEXT.JS 공식문서