[Next.js14 강의] 4강 - 페이지란 무엇인가? (pages 디렉토리와 파일 기반 라우팅)

안녕하세요! 그레이해커 월횽입니다. 이 강의에서는 Next.js에서 페이지의 개념을 이해하고, pages 디렉토리와 파일 기반 라우팅의 원리를 학습합니다. 이를 통해 Next.js에서 페이지를 생성하고, 라우팅을 설정하는 방법을 알아보도록 하겠습니다.

 

 

1. 페이지란 무엇인가?

 

Next.js에서의 페이지 정의

· Next.js에서 "페이지"는 사용자가 웹 애플리케이션의 특정 경로에 접근할 때 렌더링되는 React 컴포넌트입니다.
· 각 페이지는 pages 디렉토리 안에 파일로 정의되며, 파일의 이름이 곧 URL 경로가 됩니다.

 

페이지의 역할

· 사용자 인터페이스(UI)를 구성하고, 서버 또는 클라이언트 측에서 데이터를 가져와 화면에 렌더링합니다.
· 페이지 컴포넌트는 Next.js의 다양한 기능(SSR, SSG, ISR)을 활용하여 최적화된 웹 애플리케이션을 구축하는 데 중요한 역할을 합니다.

 

 

2. pages 디렉토리 이해하기

 

파일 기반 라우팅

· Next.js는 파일 기반 라우팅 시스템을 사용합니다. pages 디렉토리에 있는 파일은 자동으로 라우팅되며, 별도의 설정 없이 URL 경로가 생성됩니다.
· 예를 들어, pages/index.js는 / 경로를, pages/about.js는 /about 경로를 나타냅니다.

728x90

예제) 기본 페이지 생성

· pages 디렉토리 안에 about.js 파일을 생성하면, /about 경로에 대응하는 페이지가 자동으로 생성됩니다.

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the About page.</p>
    </div>
  );
}

 

 

특수한 파일들

· index.js: pages/index.js 파일은 루트 경로(/)와 연결됩니다. 이 파일은 홈페이지 역할을 합니다.
· _app.js: pages/_app.js 파일은 모든 페이지의 공통 레이아웃과 전역 상태를 관리할 때 사용됩니다. 이 파일은 프로젝트 내의 모든 페이지에 공통적으로 적용되는 설정을 정의할 수 있습니다.
· _document.js: pages/_document.js는 HTML 문서의 기본 구조를 커스터마이즈할 수 있게 해줍니다. 이 파일은 서버에서만 렌더링되며, 클라이언트 측에는 영향을 미치지 않습니다.

 

 

3. 동적 라우팅 (Dynamic Routing)

 

동적 경로 정의

· Next.js에서는 동적 라우팅을 통해 변수로 라우팅 경로를 설정할 수 있습니다. 이는 [param].js 형태의 파일 이름을 사용하여 구현합니다.
· 예를 들어, pages/posts/[id].js 파일을 생성하면, /posts/1, /posts/2 등의 동적 경로를 처리할 수 있습니다.

반응형

예제) 동적 페이지 생성

pages/posts/[id].js 파일을 생성하고, URL 파라미터에 따라 페이지를 렌더링하는 방법을 살펴봅니다.

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is the post with ID: {id}</p>
    </div>
  );
}

이 코드를 통해 /posts/1, /posts/2 등 다양한 경로에 대해 동적 페이지가 생성됩니다.

 

 

4. 동적 라우팅과 getStaticPaths

 

정적 사이트 생성을 위한 getStaticPaths

· getStaticPaths는 정적 사이트 생성(SSG)과 함께 사용하여, 빌드 시점에 동적 경로를 미리 생성할 수 있도록 도와줍니다.
· 이 함수는 동적 경로의 가능한 모든 값을 미리 정의하여, 빌드 타임에 해당 페이지들을 정적으로 생성합니다.

SMALL

예제: getStaticPaths 사용

pages/posts/[id].js 파일에 getStaticPaths와 getStaticProps를 추가하여 정적 사이트를 생성하는 방법을 배워봅니다.

export async function getStaticPaths() {
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
  ];

  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  return {
    props: {
      id: params.id,
    },
  };
}

export default function Post({ id }) {
  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is the post with ID: {id}</p>
    </div>
  );
}

이 코드를 통해 빌드 시점에 /posts/1과 /posts/2 페이지가 정적으로 생성됩니다.

 

 

5. 페이지 네비게이션 (Link 컴포넌트)

Link 컴포넌트를 사용한 페이지 이동

· Next.js의 Link 컴포넌트를 사용하여 클라이언트 측에서 페이지 간의 네비게이션을 쉽게 구현할 수 있습니다.

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <nav>
        <Link href="/about">
          <a>About Page</a>
        </Link>
      </nav>
    </div>
  );
}

 

Link 컴포넌트는 클라이언트 측 라우팅을 제공하며, 페이지 전환 시 더 빠른 사용자 경험을 제공합니다.

이 강의를 통해 Next.js의 pages 디렉토리와 파일 기반 라우팅 시스템을 이해하고, 동적 라우팅과 정적 사이트 생성 기능을 활용하여 다양한 페이지를 효율적으로 생성할 수 있습니다.

 

 

- 이전 수업 목록