[NextJS] NextJs의 라우팅

React만 사용하다가 최근부터 NextJS를 공부하고 있는데 너무 신기하다.. 기존의 React를 사용할 때는 react-router-dom을 사용한 라우팅을 전담하는 컴포넌트를 만들어줬었는데 NextJS는 그럴 필요가 없다! 

 

넥스트(Next.js) 에서는 pages 폴더 안에 page 컴포넌트를 생성하면 자동으로 경로가 설정된다!!

NextJS 프로젝트의 폴더구조를 살펴보면 다음과 같이 구성되어 있다.

/.next
/node_modules
/pages
/public
/styles
.getignore
package-look.json
package.json
README.md

 

 

여기서 pages라는 폴더 아래에 파일 또는 폴더를 생성해서 라우팅을 할 수 있다. pages 폴더내에는 index.js라는 파일이 존재할텐데 이 파일이 "/" 루트인 메인페이지로 라우팅된다.

 

📘 정적 라우팅

"/" 루트가 아닌 "/about"이라는 루트로 라우팅을 하고 싶을때는 다음과 같이 할 수 있다. 

/pages
  ㄴ-- index.js
  ㄴ-- about.js

pages 폴더 내에 about이라는 파일을 생성한다. 이때 파일의 이름이 루트가 된다.

 

// about.js

function AboutPage() {
  return (
    <div>
      <h1>the About Page</h1>
    </div>
  );
}

export default AboutPage;

 

 

 

 

파일을 생성하고 파일의 내용을 다음과 같이 구성한다면 "/about"으로 접근했을 때 h1 태그로 the About Page라는 문구를 확인할 수 있다.

 

이렇게 바로 파일을 생성하는 방법이 있고 폴더를 생성하는 방법도 존재한다. 폴더를 생성해나가면서 폴더명이 루트가 되고 폴더 내부의 index.js 파일이 원하는 주소로 접근했을 때 보여지는 Page Component가 된다.

/pages
  ㄴ-- index.js
  ㄴ-- /about
  	ㄴ--index.js

 

 

이런 구조로 파일을 구성한다면 동일한 결과를 얻을 수 있다. 

 

만약 라우팅을 하기 위한 url이 "/about/jongbin/address" 이렇게 된다면 폴더를 사용해서 늘려나갈 수 있다.

 

📗 동적 라우팅

동적라우팅도 가능하다. react에서 동적라우팅을 하기 위해서는 라우팅 컴포넌트에서 다음과 같은 식으로 만들어줬었다.

<Routes>
  <Route path="About/:id" element={<About />} />
  ...
</Routes>

 

하지만 NextJs에서는 []로 감싸주면 된다. 따라서 위와 같은 라우팅을 구현하기 위해서는 about 폴더 아래 [id].js라는 파일만 만들어주면 된다! 주의해야 하는 점은 한 폴더 아래 []를 두번 사용할 수 없다.

/pages
  ㄴ-- index.js
  ㄴ-- /about
  	ㄴ--index.js
	ㄴ--[id].js

 

이때 [id].js라는 파일에서는 입력된 쿼리 값을 다음과 같이 확인할 수 있다.

 

import { useRouter } from 'next/router';

function AboutIDPage() {
  const router = useRouter();
  console.log(router.query);

  return (
    <div>
      <h1>the ID Page</h1>
    </div>
  );
}

export default AboutIDPage;

 

 

next의 router에서 useRouter를 사용하면 되는데 이때 query메서드를 사용할 수 있다. 브라우저에서 "/about/jongbin"으로 접근하여 개발자도구를 사용하여 콘솔값을 확인해 보면 다음과 같이 출력된다.

 

짱이다...!

이를 이용해서 API요청을 보내서 데이터를 불러온다던지 할 수 있다! 추가적으로 동적라우팅을 중복해서 할 수 있다. 폴더 명을 []을 사용해서 넣어줌으로서 동적라우팅도 가능하기 때문에 이를 이용한다. 이때 사용되는 []안에 들어가는 값은 중복되서는 안된다! 

 

또한 루트가 많이 길어지고 일정 루트까지는 정해져 있을 때 등 이런 방식도 가능하다.

/pages
  ㄴ-- index.js
  ㄴ-- /about
  	ㄴ--index.js
	ㄴ--[...slug].js

 

 

자바스크립트의 전개구문(...)을 사용하면 "/about/jongbin/address"라고 url을 입력해도 [...slug].js로 접근하게 되고, useRouter를 사용해서 값을 확인할 수 있다. 확인해보면 다음과 같이 배열로 값이 들어가있다.

 

 

📕라우터 객체를 이용한 라우팅

input을 작성하고 form을 제출한다던지 등의 작업을 할때 페이지가 다시 reload되어 뒤로가기가 안된다던가의 문제점이 발생할 수 있는데 라우터객체를 사용해서 해결할 수 있다.

import { useRouter } from 'next/router';

function About() {
  const router = useRouter();
  console.log(router.query);

  function IDHandler() {
    // API 호출 등의 작업?!

    // 1. 경로로 추가할 수 있음
     router.push('/clients/max/projectA');
    
    // 2. 객체를 넣어줄 수 있음
    router.push({
        pathname: '/about/[id]',
        query: { id: 'jongbin'},
    });
  }

  return (
    <div>
      <h1>the About Page</h1>
      <button onClick={IDHandler}>Load ID</button>
    </div>
  );
}

useRouter를 사용해서 push를 사용하면 된다. 이때 두가지 방법을 사용할 수 있는데 path값 문자열로 넣어주는 방법과 객체로 넣어주는 방법이 있다. 객체로 넣어줄 때에는 path와 들어갈 query값을 key-value로 넣어준다.

 

📙 404페이지

원하지 않는 주소로 접근을 했을 때 막아주는 방법이 필요할텐데 pages 폴더 바로 아래에 404.js로 파일을 만들어 주면 된다.

 

/pages
  ㄴ-- index.js
  ㄴ-- /about
  	ㄴ--index.js
  	ㄴ--[id].js
  ㄴ--404.js

404.js 파일의 내용은 원하는대로 구성하면 된다.

 

 

위 방법들을 사용해서 라우팅을 하면 된다. NextJS의 좋은점으로 라우팅이 쉽다.라고 들었었는데 개인적인 생각으로도 폴더-파일 구조를 기반으로 했기 때문에 직관적으로 사용할 수 있다고 느꼈다!