[TIL] Next.js 13 라우팅

TIL/Next.js

[TIL] Next.js 13 라우팅

Dong _ hwa 2023. 5. 27. 03:29

이전에는 next.js 12버전을 썼었는데, 이번에 새로 나오는 13버전을 쓰기로 했다

13은 라우팅과정이 아예(?) 달라지는데, 요번에 알아보도록한당.

이전에 코딩애플에서 들었던 강의가 13버전이었는데 그것도 모르고 검색해가면서 공부한게 바보같았음

일단 예전에.. 만들다가 만 (거의 시작도 하지 않은) 게시판 프로젝트를 가지고 왔음.

타입스크립트로 하고 싶었는데 그냥 라우팅 구성만 볼 거니까 있는 그대로 JS로 해본다

진짜 설치만 하고 끝냈던거라 완전 초반부터 있는데, 만들면 이렇게 되어있다.

기본 구조는 app 내에 layout, page 이렇게 있는데 (js or ts)

layout 에서는 해당 페이지의 레이아웃을 구성하고 여기서 저 {children} 안이 page 안의 내용들이 된다. 이건 라우팅이 되어도 바뀌지 않는다.

layout.js

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
     <head>
        <title>Next.js</title>
      </head>
      <body>
        <a>여기가 page.js</a>
        {children}
      </body>
    </html>
  )
}

page.js

export default function Home() {
  return (
   <div>page.js</div>
  )
}

Next.js 에서는 파일 구조로 라우팅을 관리할 수 있는게 기본인데,

13에서는 그 폴더를 만들고 그 안에 page(ts,js)를 만들면 그 path로 만들어진다.

app 경로를 기준으로 app/board 폴더를 생성하면

브라우저 상 /board 페이지로 들어가면 board 폴더 안에 있는 page.jsx 안에 있는 내용이 나타난다.

export default function board() {
    return (
     <div>board 화면</div>
    )
  }

위의 두 layout 부분은 라우팅되어도 고정되어있다.

동적라우팅

동적인 부분들은 폴더명을 대괄호로 감싸줌으로써 가능하다.

[id] 나 [slug] 처럼 동적인 부분들은 Layout 과 Page나 Head 컴포넌트들에게 params prop으로 전달 되어진다.
예를 들어, 간단한 블로그는 [slug] 가 블로그 게시글들의 동적인 부분들이 있는 app/blog/[slug]/page.js 경로를 포함한다.

import Link from "next/link";

export default function Blog() {
    return (
        <>
            <h1>blog 페이지</h1>
        </>
    ) 
  }

export default function page({params}) {
    console.log(params)
    
    return <h1>post 페이지</h1>;
  }

Params

export default function postId({params}) {
    const query = params.postId
    
    return <h1>post {query} 번째 글</h1>;
  }

params 를 이용해 가져올 수도 있다.

searchParams 객체 사용

http://localhost:3000/blog/1?front=event&page=1 과 같은 쿼리스트링을 가져올 때!

export default function postId({ params, searchParams }) {
    console.log(params)
    console.log(searchParams)

    return <h1>post {params.postId}번째 글</h1>;
  }

마찬가지로 {searchParams.front} ( 혹은 .page) 를 이용하여 화면에 출력할 수 있다.

알아두면 좋을점:

최상단의 layout은 Root-Layout이라고 불린다. 이것은 어플리케이션 안에서 모든페이지에 공유된다. root-layout들은 html과 body 태그들을 포함해야한다.
어떠한 라우트 segment라도 선택적으로 그들만의 레이아웃을 정의할 수 있다. 이러한 레이아웃들은 모든 페이지들을 걸쳐서 공유된다.
기본적으로 라우트 안에 있는 레이아웃들은 중첩된다. 각각 부모 레이아웃은 리액트 children prop을 사용하며 자식 레이아웃을 감싼다.
너는 공유된 레이아웃 밖에나 안에 있는 특정한 라우트 segment를 선택하기 위해 라우트 그룹을 사용할 수 있다.
레이아웃들은 기본적으로 서버 컴포넌트지만 클라이언트 컴포넌트로 지정할 수 있다.
레이아웃들은 data를 fetch 할 수 있다.
부모 레이아웃과 자식 레이아웃간의 데이터 전송은 불가능하다. 하지만, 너는 같은 데이터를 한번 이상 라우트에서 fetch 할수 있으며. 리액트는 성능에 영향 끼치는 것 없이 자동으로 중복 요청에 대한 중복을 제거할 것이다.
.js, .jsx, .tsx 파일들이 레이아웃들에 쓰일 수 있다.
layout.js 나 page.js는 같은 폴더에서 정의될 수 있다. 레이아웃이 page를 감쌀것이다.

참고 : https://velog.io/@brgndy/Next.js-Routing-Pages-and-Layouts