생활코딩

Coding Everybody

Next.js의 도로교통 시스템 - Routing

토픽 생활코딩 > WEB > WEB2 - JavaScript > React > Next.js 13

사용자가 접속한 URL의 path에 따라서 콘텐츠를 응답해주는 작업을 '라우팅'이라고 합니다. 어떤 프레임워크든 그 중심에는 반드시 라우팅이 있습니다. 이것은 웹개발의 가장 중요한 요소 중 하나입니다.

용어 정리

예를 들어, "http://a.com/dashboard/analytics/"라는 주소가 있을 때, "/dashboard/analytics/" 부분을 'path'라고 합니다. 그리고 'dashboard'와 'analytics'는 각각 'segment'라고 부릅니다.

segment

소스코드

https://github.com/egoing/nextapp/commit/c5ab90bc87fd3a43d17d73571831789b18f2ebeb

라이브 예제

https://nextapp-nb0cphpkf-egoing.vercel.app/create

절차

페이지를 만드는 방법은 다음과 같습니다.

  1. 처음에 "/create"로 접속하면 "Not Found"가 출력됩니다.
  2. 그 다음, "pages/create.js" 파일을 생성합니다.
export default function Create(){
  return <>
    Create!!
  </>
}
  1. "/create"로 다시 접속하면 정상적으로 페이지가 출력됩니다.

알 수 있는 것

  1. "pages" 아래의 폴더는 세그먼트를 의미합니다. "/create"는 "pages/create" 폴더를 의미합니다.
  2. "pages/create.js" 파일이 있다면, 이 파일의 반환 값을 화면에 출력합니다.
  3. 이 값을 상위 컴포넌트인 "_app.js"의 children 위치에 표시합니다.
  4. 이때, "pages/index.js"는 무시됩니다.

layout 중첩하기

app/layout.js를 이용하여, app/create/page.js를 감싸는 하위 레이아웃을 만들고 싶다면, 다음과 같은 방법으로 할 수 있습니다:

소스코드

https://github.com/egoing/nextapp/commit/4d57d313cecf0321845aa2c5782ac954a231bcd0

라이브 예제

https://nextapp-i96t0uw1m-egoing.vercel.app/create

절차

1. app/create/layout.js 만들기

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

typescript

type LayoutProps = {
  children: React.ReactNode;
};
export default function Layout(props: LayoutProps) {
  return (
    <form>
      <h2>Create</h2>
      {props.children}
    </form>
  );
}

위의 코드는 새로운 페이지를 만들 때 사용하는 템플릿입니다. 'Create'라는 제목 아래에 자식 컴포넌트를 배치하도록 레이아웃을 정의하고 있습니다.

2. /create로 접속해보기

위의 레이아웃을 적용한 후, 웹 브라우저에서 /create 경로로 이동하면 새로 만든 레이아웃이 적용된 페이지를 볼 수 있습니다.

알 수 있는 것

  1. app/create/layout.js가 있다면, 이 파일로 app/create/page.js를 포장한 후에 app/layout.js로 포장합니다. 이는 레이아웃의 중첩을 허용합니다.
  2. Next.js는 URL 경로의 세그먼트에 따라 콘텐츠를 찾고, 해당 콘텐츠가 위치한 폴더의 layout.js를 시작으로 상위 폴더를 탐색하면서 layout.js로 감싸줍니다. 이는 Next.js의 라우팅 로직을 잘 나타내는 특징입니다.

이런 방식으로 Next.js는 간단하고 직관적인 라우팅을 제공하며, 프로젝트의 복잡성을 효과적으로 관리할 수 있도록 도와줍니다.

dynamic routing

read/1, read/2 의 1,2는 가변적으로 변경되는 경로입니다. 이런 경로를 처리하려면 이렇게 하면 됩니다. 

소스코드

https://github.com/egoing/nextapp

라이브 예제

https://nextapp-of8msqnwk-egoing.vercel.app/read/1

1. /read/1에 방문합니다. 

2. 페이지를 찾을 수 없다는 에러가 발생합니다. 

3. /app/read/[id]/page.js를 만듭니다. 

4. 코드를 아래와 같이 작성합니다. 

export default function Read(props){
  return <>
    <h2>Read</h2>
    parameter : {props.params.id}
  </>
}

typescript

type ReadProps = {
  params: {
    id: string;
  };
};
export default function Read(props: ReadProps) {
  return (
    <>
      <h2>Read</h2>
      parameter: {props.params.id}
    </>
  );
} 

 5. /read/1, read/2를 방문하면 페이지가 잘 출력 됩니다. 

6. /read/1 로 접속하면 1의 자리에 해당하는 폴더인 [id]의 이름을 기준으로 props를 만들어서 주입해줍니다. 이 값을 사용해서 여러 작업을 처리할 수 있습니다. 

댓글

댓글 본문
  1. 그 유명한 라우터 접해봄.
  2. 빵야빵야
    nextjs 너무 재밌네요...와우...;
  3. Hoon Ko
    20231018
  4. 딸기공방
    230912
  5. Hoon Ko
    20230905
  6. 김김김
    pages/create.js -> app/create/page.js

    pages/index.js -> app/page.js
  7. 어흥
    230813