Next.js 라우터

기존 React와의 차이점

우선 기존의 React 프로젝트에서의 Router 관리는 Router 라는 폴더를 하나에 두고 해당 폴더에서 Router를 관리했다.

// Router.js
import React from 'react';
import { createBrowserRouter } from 'react-router-dom';
import Home from './pages/Home';
import Live from './pages/Live/Live';
import Review from './pages/Review/Review';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/live',
    element: <Live />,
  },
  {
    path: '/review',
    element: <Review />,
  },
])

원하는 Router로 사용할 component들을 Router파일에서 위와 같이 관리했다.

그러나 Next.js 에서는

위와 같은 page에 계층적 구조로 Router를 구성할 수 있다.

위의 예시에서 index는 '/' router를 담당하고 about.js 는 about router를 담당한다.

즉, about File내에서

// about.js
export default function Test() {
    return (
        <>
            <div>Where am I?</div>
        </>
    )
}

Test 라고 해도 router는 Test가 아니라 파일명인 about이다.

따라서 Next.js에서는 page 폴더관리를 더 신중히 해야 한다.