nextjs 연습-002-라우팅 구조

nextjs가 리액트와 다른 점은 여러가지가 있지만 가장 인상적인 것은 라우팅 구조라고 생각한다.

 

기본적인 리액트는 리액트-라우터로 Shared 폴더에 Router파일을 만들고

 

import React from "react";

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

import Main from '../pages/Main';

import { styled } from 'styled-components';

import Header from "../components/Header";

import { scroller } from "react-scroll";

import Test from "../pages/Test";

const Router = () => {

  const scrollToComponent = (componentId: string) => {

    scroller.scrollTo(componentId, {

      duration: 800,

      delay: 0,

      smooth: 'easeInOutQuart',

      offset: -100,

    });

  };

  return (

    <BrowserRouter>

      <Routes>

        <Route element={<Main />} path="/" />

        <Route element={<Test />} path="/Test" />

      </Routes>

      {/*<Header scrollToComponent={scrollToComponent} />*/}

    </BrowserRouter>

  )

}

export default Router;

 

이런 식으로 만드는 것이라면 

 

nextjs는 좀 더 경직된 방식을 통해 라우팅 구조를 짠다. 새그먼트로 구분하는데, 새그먼트는 URL경로의 각 부분을 말한다. app폴더 바로 밑의 page는 루트 새그먼트로, 가장 먼저 랜더링되는 페이지를 말한다. 앱 라우팅과 페이지 라우팅의 차이도 있는데, depth가 좀 늘어나더라도 최신 방식인 앱 라우팅 방식이 더 눈에 잘 들어오는 거 같다. 코드 가독성은 폴더 구조에서도 따지는 부분이니까, 다들 이 방식을 만들어낸 것 같다...