티스토리 뷰

코딩/Next.js

[Next.JS] 페이지 라우팅

김기지 2024. 1. 24. 15:18

 

🧑‍💻 Next.JS 라우팅

Next.js에서는 URL을 수동으로 작성하지 않고 파일 시스템을 사용해 URL을 표현한다.

 

  • 라우팅
    • 네트워크 상의 주소로 이동하여 해당 주소에 연결되어 있는 데이터를 사용하는 일련의 과정

react의 경우 react-router-dom 패키지를 설치해 페이지 라우팅을 구현하지만

next에서는 정해둔 방식대로 폴더 구조를 구현하면 page 파일이 라우터 역할을 한다.

(-> page 파일이 담긴 폴더의 이름이 경로가 됨)

 

 

1. 페이지 뼈대 만들기

상위 layout 파일에 공통으로 보여질 컴포넌트를 생성한다.

각 컴포넌트를 클릭하면 페이지가 이동할 수 있도록 a태그를 사용해 경로를 연결한다.

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <h1>
          <a href="/">WEB</Link>
        </h1>
        <ol>
          <li>
            <a href="/read/1">html</Link>
          </li>
          <li>
            <a href="/read/2">css</Link>
          </li>
        </ol>
        {children}
        <ul>
          <li>
            <a href="/create">Create</Link>
          </li>
          <li>
            <a href="/update/1">Update</Link>
          </li>
          <li>
            <input type="button" value="delete" />
          </li>
        </ul>
      </body>
    </html>
  );
}

 

 

 

2. 페이지 라우팅하기

🚀 정적 라우팅

/create와 같이 미리 선언된 경로만 표현할 수 있다.

 

app 폴더의 하위 폴더로 경로와 동일한 폴더를 만든다.

폴더 안에 page 파일을 생성하고 페이지에 표시할 컴포넌트를 작성한다.

// app/create/page.js
export default function Create(){
  return (
    <>Create!!</>
  )
}

 

Create 컴포넌트가 생성되기 전에는 404에러가 표시되었지만 생성한 후 페이지 이동을 하면 설정한 컴포넌트가 표시된다.

 

이때 페이지가 여러개인 경우 layout 파일을 폴더 안에 생성하면 레이아웃이 중첩되어 표시된다.

// app/create/layout.js
export default function Layout(props){
  return (
      <form>
          <h2>Create</h2>
          {props.children}    
      </form>
  )
}

 

layout은 같은 폴더 내의 page 파일의 콘텐츠를 받아 결합한다.

여기서 결합된 콘텐츠는 부모 폴더인 app 폴더의 RootLayout의 children으로 들어간다.

 

 

 

🚀  동적 라우팅

/read/1 , /read/2 와 같이 변화가 가능한 파라미터가 포함된 경로이다.

 

react에서는 동적 라우팅을 경로 뒤에 표시한다.

<Route path='read/:id' element={}/>

 

next에서는 [id] 폴더를 경로 폴더에 추가한 후 page 파일을 생성한다.

// read/[id]/page.js
export default function Read(props) {
  return (
    <>
      <h2>Read</h2>
      parameters: {props.params.id}
    </>
  );
}

 id를 꺼내오기 위해 params에 접근해 id를 가져온다.

 

 

 

🚀 라우팅 동작 방식

  1. /create로 페이지 이동
  2. app 폴더의 하위 폴더로 create 폴더가 있는지 확인
  3. create 폴더가 page 파일을 가지고 있는지 확인
  4. 같은 폴더 내에 layout 파일이 있다면 layout과 결합
  5. 부모 폴더로 이동해 RootLayout을 찾아 children으로 들어감

 

 

 

🧑‍💻 Link 컴포넌트 사용하기

Next.js의 특징인 SSR 방식은 서버에서 코드를 실행한 후 만들어진 HTML을 넘겨받아 화면에 표시한다.

초기 진입 시에는 로딩이 빠르다고 느껴지지만 페이지 이동 시에도 모든 컨텐츠를 다시 받아와 표시하기 떄문에 사용자 입장에서는 느리다고 느껴지고, 서비스 제공자 입장에서는 돈이 많이 든다는 단점이 있다.

 

 

 

이를 해결하기 위해 공식 문서에 제안하는 Link 태그 또는 useRouter 훅을 사용하자.

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

 

Routing: Linking and Navigating | Next.js

Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.

nextjs.org

 

Link 컴포넌트로 만들어진 링크 위에 마우스를 올려두면 아직 클릭하지 않았음에도 백그라운드에서 미리 페이지를 다운받는다.

=> 클릭하면 페이지가 바로 이동된 것처럼 표시됨

 

이미 방문한 페이지를 재방문 하는 경우에는 서버와 통신하지 않고도 이동이 이루어지기 때문에(SSR 방식) 사용자는 페이지 로딩이 빠르다고 느끼고, 서비스 제공자는 돈을 절약할 수 있다.

 

또, 웹 페이지가 여러 개의 페이지로 이루어졌음에도 불구하고 마치 한 페이지인 것처럼 동작한다.

 

 

 

+ Route Group

Next.js에서 폴더는 경로에 맵핑된다.

하지만 경로에 포함되지 않고 라우트 세그먼트와 프로젝트 파일을 담을 목적으로 폴더를 만들고 싶다면 Route Group으로 설정한다.

|--app
|   ㄴ(home)
|     ㄴ page.tsx
|   ㄴlayout.tsx

( )안에 폴더 이름을 작성하면 경로에 포함되지 않는 폴더가 된다.

 

(home) 폴더 안에 page 파일이 존재하지만 (home) 폴더는 경로가 아니므로 page 파일의 경로는 /이 된다.

728x90

'코딩 > Next.js' 카테고리의 다른 글

[Next.JS] 데이터 추가, 수정, 삭제  (0) 2024.02.01
[Next.JS] Git push 에러 해결하기  (0) 2024.01.31
[Next.JS] Data fetching  (0) 2024.01.28
[Next.JS] Server Component와 Client Component  (0) 2024.01.27
[Next.JS] NextJS 왜 사용할까?  (0) 2024.01.24