◆ 파일 기반 라우팅
각 페이지는 `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
'스터디 > Udemy) NextJS 15 & React' 카테고리의 다른 글
| 01. NextJS란 무엇이며, 왜 사용하는가? (2) | 2024.11.28 |
|---|---|
| 유데미(Udemy) 러닝크루 / [ Next.js 15 & React - 완벽 가이드 ] (0) | 2024.11.18 |