페이지 & 파일 기반 라우팅
📚 파일 기반 라우팅
Next.js를 사용하면 애플리케이션의 다양한 페이지를 파일로 관리할 수 있다. 각 페이지는 page.js 라는 파일에 정의된다. 이 파일은 Next.js에게 페이지를 렌더링해야 한다는 것을 알려준다. 이것은 Next.js의 강력한 기능 중 하나이며, 파일 시스템을 사용하여 애플리케이션의 구조를 자연스럽게 관리할 수 있다.
📚 경로 추가하기
새로운 경로를 추가하려면 간단하게 app 폴더 내에 새 폴더를 만들고 해당 폴더 내에 page.js 파일을 생성하면 된다. 이것은 각 페이지의 경로를 반영하는 것으로, 예를 들어 /about 페이지를 추가하려면 app/about/page.js 와 같은 경로에 파일을 생성하면 된다.
📚 페이지 간 이동
import Link from "next/link";내부 링크를 생성하기 위해 <a> 태그 대신 Link 컴포넌트를 사용할 수 있다. 내부 링크를 생성하기 위해 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 파일은 하나 이상의 페이지를 감싸는 레이아웃을 정의한다. 모든 Next.js 프로젝트에는 최소한 하나의 루트 layout.js 파일이 필요하다. layout.js 파일은 웹사이트의 일반적인 HTML 레이아웃을 제공하는 역할을 한다.
layout.js 파일은 모든 페이지에 공통된 요소를 포함할 수 있다. 예를 들어, 네비게이션 바, 푸터, 사이드바 등을 포함할 수 있다. 중첩된 레이아웃도 가능하며, 각 경로 또는 섹션에 따라 다른 레이아웃을 사용할 수 있다.
layout.js 파일에는 metadata 객체를 사용하여 페이지의 제목과 설명을 정의할 수 있다. 또한, children 은 레이아웃에 포함된 페이지 컴포넌트를 가리키며, 현재 활성화된 페이지의 컨텐츠를 의미한다.
📚 Global CSS 설정하기
import './globals.css'globals.css 파일을 생성하여 모든 페이지에 대한 전역 CSS를 설정할 수 있다. 이 파일을 루트 layout.js 파일에서 import하면 모든 페이지에 해당 CSS가 적용된다.
📚 Favicon 설정하기
NextJS에서 favicon은 app 폴더 아래에 icon 이라는 이름의 이미지를 넣음으로써 설정할 수 있다.
📚 커스텀 컴포넌트 만들기
커스텀 컴포넌트를 만들어서 페이지에서 재사용할 수 있다. 예를 들어, header.js 와 같은 커스텀 컴포넌트를 만들어 사용할 수 있다. 필요한 페이지에서 해당 컴포넌트를 import하여 사용한다.
📚 File Convention
특정 파일명을 가진 파일들은 특별한 용도로 사용된다. 예를 들어, 앞서 나온 page.js 는 새 페이지를 생성하고, layout.js 는 레이아웃을 정의한다. 그 외에도 not-found.js, error.js, loading.js, route.js 와 같은 파일들이 있다.
주의할 점은 해당 파일명들은 app 폴더 내부에서 생성될 때만 위와 같은 특별한 용도로 처리 된다는 것이다.
📚 동적 라우트
Next.js에서의 동적 라우팅은 중첩 폴더를 사용하여 정의된다. 이를 위해 대괄호를 사용하여 동적 세그먼트를 나타낼 수 있다. 이 동적 라우트를 통해 동적으로 변하는 경로에 대응하는 페이지를 생성할 수 있다. 대괄호 안에는 동적으로 변하는 값을 나타내는 식별자를 넣을 수 있으며, 이를 통해 해당 값에 접근할 수 있다.
Next.js에서는 모든 페이지 컴포넌트에 props 객체를 전달한다. 이 props 객체에는 다양한 정보와 값들이 포함되어 있는데, 그 중 params 프로퍼티에는 동적 라우트에 포함된 모든 동적 세그먼트의 이름과 해당 값이 포함된 객체가 저장되어 있다. 이 객체에서 각 동적 세그먼트에 대한 값을 얻기 위해서는 해당 세그먼트의 이름을 키로 사용하여 접근한다.
예를 들어, /blog/[slug] 와 같은 동적 라우트에서 slug 라는 동적 세그먼트가 있다고 가정하면, params.slug 를 통해 이 세그먼트의 값을 얻을 수 있다. 이 값은 URL에 인코딩되어 있는 해당 동적 세그먼트의 정확한 값을 나타낸다.
어제는 왜 안올렸죠?