[Next] Next에서 라우팅 구현하기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

React의 라우팅

React의 경우 페이지 이동을 하려면 react-router-dom 라이브러리를 설치한 후 아래의 코드처럼 Routes에 등록해줬다.

import { BrowserRouter } from "react-router-dom";
import { Routes, Route } from "react-router";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

 

react-router의 작동 방식은 url을 지정하고 사용자가 해당 url에 접근할 때 컴포넌트의 render를 요청하는 것이다.

 

페이지를 생성할 때마다 url과 해당 url 접속 시 보여줄 페이지를 사용자가 직접 작성해줘야 했다.

 

 

Next의 라우팅

하지만 Next JS에서는 사용자가 직접 url을 설정할 필요가 없다.

 

그저 app 폴더 안에 하위 폴더를 만들면 생성한 폴더명으로 url이 만들어진다.

 

하지만 무작정 폴더만 만든다고 페이지에 접속할 수 있는 것은 아니다.

 

폴더를 만드는 것은 단순히 url 경로를 등록하는 것이다.

 

중요한 것은 url로 접속했을 때 Next JS가 렌더링 할 UI를 제공해 주는 것이다.

 

따라서 등록한 url을 사용자에게 제공하기 위해서는 생성한 폴더 안에 page.tsx 파일을 만들어줘야 한다는 것이다.

 

그리고 파일명을 page.tsx가 아닌 다른 이름으로 작성한다면 Next JS는 그 파일을 렌더링하지 않는다. 

 

 

최상위 폴더인 app 폴더 안의 page.tsx는 "/"(root)로 접속했을 때의 페이지를 보여준다.

 

만약 사용자가 "/about-us"라는 url에 접속할 경우 페이지를 노출하고 싶다면 어떻게 하면 될까?

 

정답은 app 폴더 내에 about-us 폴더를 생성한 후 그 안에 렌더링 할 page.tsx 파일을 작성하면 된다.

 

폴더 생성 및 파일 작성 후 "/about-us"로 접속해 보면 아래와 같이 페이지가 출력되는 것을 확인할 수 있다.