스터디/Udemy) NextJS 15 & React

03-1. 파일 기반 라우팅 & 페이지

개발자 화진 2024. 12. 2. 00:47

◆ 파일 기반 라우팅

각 페이지는 `page.js`라는 파일에 정의되고, 이 파일은 NextJS에게 페이지를 렌더링해야 한다는 것을 알려줍니다.

이것은 NextJS의 강력한 기능 중 하나이며, 파일 시스템을 사용하여 애플리케이션의 구조를 자연스럽게 관리할 수 있습니다.

 

◆ 파일 시스템을 통한 경로 추가

새로운 경로를 추가하기 위해 `app` 폴더 내에 새 폴더를 만들고 하위에 `page.js` 파일을 생성하면 됩니다.

예를 들어 `/app/about/page.js` 파일을 생성하면 `/about` 페이지가 추가됩니다.

 

◆ 페이지 간 이동

  • Server-side(Backend) : 서버 컴포넌트 함수를 실행하는 과정에서 최종적으로 렌더링될 HTML 코드를 생성합니다.
  • Client-side(Frontend) : 렌더링될 HTML 코드를 수신하고 이를 화면에 표시합니다.
import Link from "next/link";
// ...
<p><Link href="/about">About Us</Link></p>

 

내부 링크 생성 시 `<a>` 태그 대신 `<Link>`를 사용하여 단일 페이지 애플리케이션을 벗어나지 않고 페이지를 업데이트 할 수 있습니다.

다른 페이지로 이동 시, 페이지가 새로고침되지 않고 동적으로 업데이트 됩니다.

 

◆ 레이아웃 작업하기

export const metadata = {
  title: 'NextJS Course App',
  description: 'Your first NextJS app!',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

`layout.js` 파일은 하나 이상의 페이지를 감싸는 레이아웃을 정의합니다. NextJS 프로젝트에서 최소한 하나의 루트 `layout.js`가 필요하고, 각 경로마다 `layout.js`를 생성하여 중첩된 레이아웃 페이지를 만들 수도 있습니다.

NextJS에는 `<head>` 대신 `metadata` 객체를 사용하여 페이지의 제목과 설명을 정의할 수 있습니다.

또한, `children`은 레이아웃에 포함된 페이지 컴포넌트를 가리키며, 현재 활성화된 페이지의 컨텐츠를 의미합니다.

 

◆ Favicon 설정하기

`app` 폴더 아래 `icon`이라는 이미지를 넣어 설정할 수 있습니다.

 

◆ 보호된 파일명

NextJS에는 특정 파일명을 가진 일부 파일들이 특별한 용도로 사용됩니다.

  • `page.js` 외에 NextJS에서 기본적인 라우팅 및 에러 처리를 돕는 파일들이 있습니다.
  • `layout.js` : 페이지의 레이아웃을 정의하는 파일. 여러 페이지에서 공통적으로 사용하는 레이아웃을 설정할 때 사용
  • 'not-found.js' : "페이지를 찾을 수 없음" 상태를 처리하는 파일
  • `error.js` : 애플리케이션에서 에러 발생 시, 표시할 오류 페이지를 정의하는 파일
  • `loading.js` : 형제 또는 중첩 페이지가 데이터를 가져오는 동안 표시되는 파일
  • `route.js` : API 경로를 생성하는 파일

이러한 파일명들은 `app` 폴더 내부에서 생성될 때만 특별한 용도로 처리가 됩니다.

 

◆ 동적 경로

NextJS에서 동적 경로는 대괄호를 사용하여 중첩 경로를 생성할 수 있습니다.

ex) /app/blog/[slug]/page.js

대괄호 안에는 동적으로 변하는 값을 나타내는 식별자를 넣을 수 있고, 이를 통해 해당 값에 접근할 수 있습니다.

 

NextJS는 모든 페이지 컴포넌트에 `props` 객체를 전달합니다. 이 `props` 객체에는 다양한 값들이 포함되어 있는데, 그 중 `params` 프로퍼티에는 동적 경로에 포함된 모든 동적 세그먼트 이름과 해당 값이 포함된 객체가 저장되어 있습니다.

이 객체에서 동적 세그먼트에 대한 값을 얻기 위해서는 해당 세그먼트의 이름을 키로 사용하여 접근해야 합니다.

ex) params.slug