NextJS- 파일기반 라우팅

반응형

NextJS 의 파일기반 라우팅 을 알아보자

NextJS 의 파일기반 라우팅은 pages 라는 디렉토리에 파일이름으로 생성이된다.

기본적인 사용법

파일명, 폴더명이 해당 라우트명으로 지정되게된다.

index 의 의미

pages 안에 index.js 가 있는데 index 파일명은 해당 루트를 나타낸다.

즉 pages 안에 있는 Index.js 는 http://localhost:3000 로 접근했을때 나타나는 페이지이다.

중첩라우팅

중첩라우팅 또한 디렉토리를 생성하여 구현할수있고 디렉토리명이 하위 라우트명이 되게 된다.

여기서 news 디렉토리안에 index.js 가 또 있는데 이는 http://localhost:3000/news 로 진입했을때 페이지를 나타내게된다.

이런식으로 중첩라우팅을 쉽게 구현할수있다.

동적라우팅

nextJS 에서 지정한 포맷인 [ ] 대괄호를 통해 사용하면 동적라우팅을 구현할수있다.

동적라우팅의 정보는 useRouter 훅을 사용하여 확인할수있다.

import { useRouter } from "next/router";
import React from "react";

const DetailPage = () => {
  const router = useRouter();
  return <h1>{router.query.newsId}</h1>;
};

export default DetailPage;

Link

next/link 의 Link 컴포넌트를 사용해서 기존 react-route 의 Link 와 동일한 기능을 수행할수있다.

import Link from "next/link";
import React from "react";

const newsPage = () => {
  return (
    <>
      <h1>뉴스페이지</h1>
      <ul>
        <li>
          <Link href="/news/1241">이건어디로갈까요?</Link>
        </li>
      </ul>
    </>
  );
};

export default newsPage;