[NEXT.JS] 파일기반 라우팅(page Router)

next.js 란?

next.js는 react기반 라이브러리이다. 기존 react의 단점을 보완하여 만들어진 라이브러리 이다,

react는 Single Page Application (SPA)으로 하나의 html안에 자바스크립트로 페이지를 그려주는 라이브러리 이다.

하나의 html 만 존재하기 때문에 페이지를 이동할 때 깜빡거림 없이 자연스럽게 이동하여 최적화된 UX를 제공해 준다.

그러나 하나의 HTML만 존재하기에 SEO에 취약하고 CSR을 지원하기 때문에 초기 렌더링 속도가 느리다.

이러한 단점을 개선하여 나온 라이브러리가 바로 NEXT.JS이다.

 

NEXT.JS는 SSR을 지원하여 react의 단점을 극복하였기 때문에 많은 곳에 사용되고 있다.

 

오늘은 next.js의 기능 중 파일기반 라우팅(page router)를 알아 보겠다.

 

먼저 creact-next-app으로 프로젝트를 셋업하면 아래와 같은 폴더구조를 가진다. 

src라는 폴더 밑에 pages라는 폴더가 있는데 이 pages폴더가 파일기반 라우팅을 해주는 폴더이다.

 

pages폴더에는 index.js라는 폴더가 있는데 index.js파일은 해당페이지를 보여주는 컴포넌트 파일이다.

우리가 www.도매인 주소.com/으로 처음 들어갔을때 보여지는 페이지가 바로 index.js파일 이다. 

 

이 pages폴더에서 라우팅되었을 때 보여지는 페이지를 만들기 위해서는 원하는 라우팅.js파일을 만들거나, 폴더를 생성하여 그안에 index.js파일을 만들면 된다. 

 

파일로 라우팅

 

정적라우팅

about.js파일을 만들어 /about으로 라우팅을 해보겠다.

const About = () => {
    return (
        <>
            <h1>About</h1>
        </>
    )
}

export default About

리엑트에서 함수형 컴포넌트를 만들듯이 만들면 된다.

 

/about

필자는 윈도우OS에서 다크모드를 사용중인데 NEXT.JS기본 스타일 중에 OS의 모드에 따라 자동으로 다크모드를 설정해 주는 스타일이 적용되어있다 OS에 다크모드가 적용되어있지 않다면 하얀색 배경에 검정색 글씨로 나올것이다.

 

폴더로 라우팅

portfolio라는 폴더를 만들고 그안에 index.js 파일을 만들겠다.

 

index.js

const Portfolio = () => {
    return (
        <>
            <h1>Portfolio</h1>
        </>
    )
}

export default Portfolio

 

/portfolio

 

 

동적 라우팅

지금 까지의 라우팅을 정적라우팅이라고 한다. 동적라우팅은 url/path가 정적으로 지정된 것이 아니라 동적으로 지정되어서 파라미터값을 입력하여 라우팅한다. 대표적으로 쇼핑몰 detail페이지가 있다. 

 

파일이름을 [].js로 이름을 짖고 []안에는 원하는 이름을 작명한다. 

 

import { useRouter } from "next/router";

const PortfolioProjectPage = () => {
    const { query } = useRouter();
    const { id } = query;
    console.log(id)
    return(
        <>
            <h1>{id} PortfolioProjectPage</h1>
        </>
    )
}

export default PortfolioProjectPage;

리엑트에서 useParms로 파라미터 값을 가져오는것처럼 next.js에서는 useRouter로 파라미터 값을 가져온다.

useRouter()에 query라는 메서드로 파라미터값을 가져올 수 있다. 그 query안에 파라미터 값이 객체형태로 들어 있다. 

 

/portfolio/[id]

url을 보면 /portfolio/[id]의 [id]부분에 파라미터 값을 111을 주었는데 그 111 값을 가져와 브라우저에 렌더링된것을 볼 수 있다.

 

리엑트에선 <Route patt={"/portfolio/:id"} element={<Portfolio />} />이다

 

중첩 동적 라우팅 

동적라우팅을 중첩하여 사용할 수 있다.

 

폴더구조

client라는 폴더안에 [id]라는 폴더를 만들었다 이 [id]라는 폴더가 첫번쨰 파라미터 이다.

그리고 [id]폴더 안에 [clientId].js파일을 만들고 이 [clientId].js파일이 두번째 파라미터가 된다.

 

[clientId].js

const { useRouter } = require("next/router")

const ClientPersonPortfolio = () => {
    const { query } = useRouter();
    const { id, clientId } = query;
    return (
        <>
            <h1>{id}{clientId}</h1>
        </>
    )
};

export default ClientPersonPortfolio

 

중첩된 동적 라우팅이기 때문에 id와 clientId를 둘다 가져 오는것을 볼 수 있다. 

 

console

 

/client/[id]/[clientId]

url을 보면 파라미터가 중첩된것을 볼 수 있고 중첩된 파라미터를 렌더링하는 모습을 볼 수 있다. 

 

 

Catch-All 라우팅

Catch-All라우팅이란 중첩라우팅을 사용하지 않고도 중첩라우팅효과를 볼수있는 라우팅 기법이다.

하나의 파일에서 중첩라우팅을 유연하게 구현할 수 있다. 

주로 연/월/일 벌로 라우팅을 할때 사용한다.

 

폴더구조

blog라는 폴더안에 [...id].js파일이 있다. 일반적인 동적 라우팅 파일명과 조금 다른데 그것은 스프레이트 오퍼레이터 구문을 사용하여 파일명을 만들었기 때문이다.

... 뒤에 오는 이름은 마음데로 작명을 하되 [...]부분은 꼭 지켜서 파일명을 작명해야 한다. 

 

[...id].js

const { useRouter } = require("next/router");

const Blog = () => {
  const { query } = useRouter();
  const { id } = query;
  console.log(id)
  return (
    <>
      <h1>{id?.map((x)=><span key={x}>{x}</span>)}Blog</h1>
    </>
  );
};

export default Blog;

그전에 동적라우텅을 할때 파라미터의 value가 문자열로 저장되었지만 Catch-All 라우팅은 배열로 저장된다.

 

console

이렇게 파라미터가 배열로 저장된것을 확인할 수 있다.

 

/blog /[...id] /[...id] /[...id]

 

 

 

네비게이션 (Link, Router.push)

이제 브라우저에 직접 url을 입력하는 것이 아닌 버튼을 클릭하면 해당페이지로 라우팅되도록 구형해보겠다.

 

Link

Link태그는 React-router-dom의 Link와 매우 똑같다

 

코드

<Link href={"/blog/f/efe"}>Blog</Link>

href에 경로를 입력하면 해당 페이지로 라우팅이 된다

 

 

Router.push

useRouter()에서 제공하는 push라는 메소드를 이용하여 해당페이지로 라우팅을 할 수 있다. 

 

코드

const { push } = useRouter();
<li onClick={()=>{ push("/blog/f/efe") }}>Blog2</li>

React의 useNavigate()와 같이 useRouter()에서 제공하는 push메서드를 이용하여 라우팅을 할 수 있다.