Next.js의 레이아웃과 페이지

레이아웃과 페이지

Next.js에서의 라우팅 시스템과 리액트에서의 라우팅 시스템은 다르다. 리액트에서는 따로 라우팅 라이브러리를 깔아야 하지만, Next.js에서는 "파일" 기반의 라우팅 시스템을 가지고 있다.

각 폴더는 URL 경로와 매치되는 라우트 경로를 나타낸다.

파일 기반의 라우팅 시스템

당신이 지은 폴더의 이름이 라우팅 주소의 이름이 된다.

(예를 들어) app 폴더 안에 dashboard라는 폴더를 만든다. 이후 invoices라는 폴더를 만들면 "내 도메인 / dashboard / invoices" 가 라우팅 주소가 된다. 

그리고 각 라우트 마다 page.tsx / layout.tsx 파일을 통해 별도의 UI를 만들 수 있게 된다.

app 최상단의 page의 라우팅 주소는 " / " 이다.

app 폴더의 최상 파일. 즉, src > app > page.tsx는 홈화면이 되어줄 것이다.

dashboard 폴더를 만들고 그 폴더 안에 page.tsx를 만들면, 그 라우팅 주소는 /dashboard가 된다. 

다시 강조하지만, 당신이 작성한 폴더가 "라우팅 주소"가 된다!

이 부분을 눈으로 직접 확인하고 싶다면, 다음과 같은 행동을 따르자.

• app 내에 dashboard라는 폴더 만들기.
• 그 안에 page.tsx(또는 jsx) 만들고 밑의 코드 복붙하기

/app/dashboard/page.tsx

export default function Page() {
  return <p>Dashboard Page</p>;
}

npm run dev를 해서 서버를 열어라. 이후  http://localhost:3000/dashboard 을 주소창에 기입하고 들어가면

Dashboard Page라는 글자를 볼 수 있을 것이다.

실습하기

dashboard 에서 추가로 2개의 페이지를 더 생성해 보자. 페이지의 이름은 

Customers Page / Invoices Page 이다.

---

> 폴더 구조

dashboard 폴더 안에 customers와 invoices 폴더를 만든다. 이 폴더 안에 page.tsx를 만들면 끝이다.

Customers Page:

 

/app/dashboard/customers/page.tsx

 

export default function Page() {  return <p>Customers Page</p>;}

Invoices Page:

 

/app/dashboard/invoices/page.tsx

 

export default function Page() {  return <p>Invoices Page</p>;}

 

확인하고 싶으면 주소창에 라우팅 이름을 작성해 주면 된다.

여러 페이지에 공통으로 공유되는 UI

예를 들어서 웹 사이트의 위 내비게이션 메뉴나 밑의 푸터 부분이 "모든 페이지"에 공통으로 사용되는 UI가 있다고 치자.

그러면 이 코드를 모든 page.tsx에 추가해야 할까?

정답은 "절대 아니다." 이다. 모든 페이지에 공통으로 기입되는 UI는 layout.tsx에 넣어주면 된다.

예를 들어 내가 dashboard에서 공통으로 들어갈 UI 코드가 있다고 치자. 그럼 다음과 같이 작성해 주면 된다.

/app/dashboard/layout.tsx

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

layout.tsx에 작성된 코드는 dashboard 폴더 안에 존재하는 모든 page에 넣어줄 수 있다.

(참고로 SideNav는 dashboard 안의 sidenav 폴더에 존재하는 컴포넌트이다. 리액트 기반 프레임워크이니 Next.js에서도 컴포넌트를 부품처럼 만들어서 불러올 수 있다.)

---

그리고, layout에 기입된 코드는 페이지 이동 시에 따로 렌더링 되지 않지만, 오직 페이지 컴포넌트만 변경된다.

이것을 부분 렌더링이라고 부른다. 부분 렌더링을 하면, 전반적인 성능 향상이 일어난다. (페이지 전체를 렌더링 하는 것보다 그 페이지의 일부분만을 렌더링하는 속도가 당연히 더 빠를 것이다. 즉, 변경할 부분만 바꾸고, 안 바꾸는 건 그냥 그대로 두는 것!)

부분 렌더링

다음번 글은 이제 페이지를 이동하는 방법을 작성하겠다.

---

노마드코더 레이아웃 영상

https://www.youtube.com/watch?v=Yfgv5PXWBZY&t=364s

 

(코딩 애플 관련 글)

https://codingapple.com/unit/nextjs-layout-file/?id=68759

여러 페이지 만들기 (라우팅) - 코딩애플 온라인 강좌

---

(공식 문서)

https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages

App Router: Creating Layouts and Pages | Next.js

---