Next.js 공부하기 2일차

안녕하세요 🐸
오늘은 Next.js 에서 라우팅에 대해 알아보겠습니다.

기존의 React 에서는 react-router-dom 이라는 패키지를 통해 라우팅 기능을 구현했습니다. 이는 url과 view를 서로 매핑시켜줘야 하는 번거로움이 있습니다. Next.js 에서는 별도의 라우팅을 구현할 필요 없이 파일구조 형식을 따르는 것으로 라우팅 기능을 구현할 수 있습니다.

React vs NextJS

React의 라우팅 ( react-router-dom )

코드 예시

import { createBrowserRouter, RouterProvider } from "react-router-dom";

// ... 생략
function App(){

const router = createBrowserRouter([ // url:뷰 매칭
	{
		path:'/',
		element:<Home/>
	},
	{
		path:'/VIEW',
		element:<View/>
	},
	//...생략
])

  return (
    <div>
      <Container>
        <RouterProvider router={router}/>
      </Container>
    </div>
  );
}

위와 같이 사전에 url에 해당하는 뷰를 라우터에 설정을 해야합니다.

Next.js 라우팅

리액트는 app 폴더 내의 폴더 구조에 따라 라우팅이 이루어집니다.
간단한 예시로 도메인의 루트(/ ) 는 app 폴더 내의 page.tsx (혹은 page.jsx) 를 찾아 갑니다. 만약 해당 위치에 page 파일이 없다면 404 에러를 발생 시킵니다.
그리고 다른 페이지의 라우팅 주소를 예시로 /about-us URL 에 해당하는 페이지를 만들기 위해서는 app 폴더 내에 about-us 폴더를 생성하고 안에 page.tsx 파일을 생성합니다. 위의 경우 파일 구조는 다음과 같습니다.

루트 URL(/) 에 해당하는 app 폴더 하위의 page.tsx 파일과 /about-us URL에 해당하는 폴더 about-us 아래에 page.tsx 가 있음을 확인할 수 있습니다.

하위 경로 만들기

하위 경로의 URL도 파일 구조를 따라 만드는 것으로 생성할 수 있습니다. 만약 /about-us/company/sales 라는 URL을 만들고 싶다면 그에 맞는 폴더와 page 파일을 생성하는 것으로 만들 수 있습니다.

이미지로는 파일 구조가 명확하게 구분되어 보이지 않아 했갈릴 수 있습니다.

위에서 저는 about-us ** 폴더에 **company 폴더를 만들고 거기에 sales 폴더를 만들었습니다. 최종적으로 생성된 URL은 /about-us/company/sales 가 됩니다.
여기서 주의할 부분은 sales 폴더 안에는 page 파일을 생성했지만 company 폴더에는 생성하지 않았다는 부분 입니다.
이런 경우 /about-us/company/sales 으로 접근하면 정상적으로 페이지에 접근이 되지만 /about-us/company 에 접근하려 한다면 page 파일이 없기 때문에 404 에러가 발생합니다.

코로케이션 (Colocation)

Next.js 는 app 폴더를 통해 라우팅을 지원하고 있지만 여기에는 반드시 page만 존재해야하는 것은 아닙니다. 파일 구조에 따라서 app 폴더 내부에 컴포넌트 혹은 정적 파일 등이 위치할 수도 있습니다.
파일 구조는 개발 초기에 정하고 시작하면 되는 부분이기에 Next.js에서 파일 구조를 강요하지 않습니다.
이렇게 생성한 page 외 기타 파일은 URL로써 사용되지 않습니다.

추가 확인사항
공식 홈페이지의 문서에서 page 파일은 .jsx , .tsx 뿐만 아니라 .js 확장자 까지 지원한다고 명시되어 있습니다.