[Nextjs] Next.js의 Page Router

김채운·2024년 10월 18일
0

Next.js

목록 보기
6/25

Next.js는 React를 기반으로 한 프레임워크로, Page Router라는 라우팅 방식을 제공한다. 이는 React Router처럼 페이지 간 이동을 관리하지만, 파일 구조를 기반으로 라우팅을 자동으로 처리해주는 기능을 내장하고 있어 개발자에게 많은 편의를 제공한다.

1. Page Router란?

Next.js의 Page Router는 "pages" 폴더 안의 파일 및 폴더 구조에 따라 자동으로 라우팅을 설정해주는 라우터이다. React에서 사용하는 React Router처럼 페이지 간 이동을 처리하지만, 파일명과 폴더 구조에 맞춰 페이지 경로가 자동으로 결정된다는 점에서 차이가 있다.

1-1. 파일 및 폴더 기반 라우팅

Next.js 프로젝트의 pages 폴더에 파일을 추가하는 것만으로 페이지를 생성할 수 있다. 예를 들어, pages/about.js 파일을 생성하면 /about 경로로 라우팅이 자동으로 설정된다.

  • 파일 기반 라우팅: pages/index.js는 / 경로로, pages/about.js는 /about 경로로 매핑된다.

  • 폴더 기반 라우팅: 파일들의 이름만 기준이 되는 게 아니라, 폴더의 이름을 기준으로도 페이지 라우팅을 설정할 수 있다. search 폴더를 생성하고 그 안에 index.js 파일을 넣으면 해당 폴더 이름이 경로로 사용된다. 예를 들어, pages/search/index.js는 /search 경로로 라우팅된다.

1-2. 동적 경로 (Dynamic Routes)

Next.js는 동적 경로 설정도 매우 간단하다. 동적 경로는 URL에 어떠한 변할 수 있는 가변적인 값을 포함하고 있는 경로를 말한다(ex: /country/1, ~/country/2 ..., ~/country/100). 블로그의 게시글 페이지나 상품의 상세 페이지 같은 곳에서 자주 사용된다.

  • 동적 경로를 설정하려면, 대괄호를 사용하여 파일을 생성하면 된다.

  • ex: pages/country/[code].js . 이 파일은 /country/1, /country/2 등 변동 가능한 숫자나 문자열을 포함한 경로에 대응하는 페이지를 생성한다. 그래서 이 동적 경로에 있는 가변적인 값이 대괄호 속에 있는 code에 하나씩 mapping되는식으로 페이지 라우팅이 설정된다.

이처럼 Next.js의 Page Router는 파일명과 폴더 구조만으로 손쉽게 라우팅을 설정할 수 있어, 기존의 React Router에 비해 훨씬 편리하다.

2. Next.js 프로젝트 생성 및 실행

2-1. Next.js 프로젝트 생성

Next.js 프로젝트는 npx(Node Package Executor) 명령어를 사용해 간편하게 생성할 수 있다. npx는 최신 버전의 Node 패키지를 다운로드 없이 실행할 수 있는 도구로, 아래 명령어를 통해 Next.js 프로젝트를 생성할 수 있다.

npx create-next-app@버전 or latest 프로젝트이름

  • npx라는 도구를 이용해서 create-next-app이라는 새로운 next앱을 생성하는 도구를 사용해 명령을 실행하겠다라는 뜻.

2-2. 프로젝트 실행

Next.js 앱을 실행하려면 두 가지 모드를 사용할 수 있다 (개발 모드 & 프로덕션 모드)

✨ 개발 모드

npm run dev (개발 모드로 Next App 실행)

  • 개발 중에는 개발 모드를 사용해 애플리케이션을 실행하는게 좋다. 이 모드에서는 코드 변경 시 핫 리로딩(hot reloading)이 지원되어, 브라우저를 새로고침하지 않고도 변경 사항을 실시간으로 확인할 수 있다. 또한, 디버깅이 용이하게 설정되어 있어 오류나 경고를 상세하게 확인할 수 있다. 한 마디로, 개발자 친화적인 환경을 제공해 개발 속도를 높여준다.

✨ 프로덕션 모드

npm run start

  • 배포용으로 사용하는 모드로 배포할 때는 프로덕션 모드로 애플리케이션을 실행한다. 이 모드에서는 애플리케이션이 정적 파일로 빌드된 후 최적화된 상태로 실행되며, 핫 리로딩과 같은 개발 도구는 비활성화된다. 코드 변경 사항이 있을 경우, 다시 빌드를 해야 적용된다.

따라서, Next.js는 개발 중에는 빠른 피드백과 수정 작업을 위해 npm run dev로 앱을 실행하며, 배포 시에는 최적화된 상태로 실행하는 npm run start를 사용하게 된다.

3. Next.js의 주요 파일 및 폴더 구조

Next.js 프로젝트를 생성하고 나면, 다양한 파일과 폴더가 포함된 기본 구조를 볼 수 있다.

Next.js도 결국 react를 기반으로 만들어진 react확장판 개념의 프레임워크이기 때문에 public폴더가 존재한다거나, src폴더가 존재하는등 기존의 react앱과 매우 유사한 폴더 구조를 가지고 있는데 각 폴더를 살펴보자면,

3-1. public 폴더

  • public폴더는 웹 애플리케이션에서 정적 파일을 보관하는 곳이다. 이 폴더 아래에는, 로고 이미지나 favicon 같은 파일들처럼 페이지 내부에서 사용할 이미지 파일들 같은 정적인 파일들이 보관되어 있으며, 별도의 설정 없이 /logo.png와 같은 경로로 접근할 수 있다.

3-2. src의 pages 폴더

  • src폴더 아래에는, pages폴더가 있는데, page의 역할을 할 컴포넌트들을 보관할 파일들을 경로에 맞게 보관할 수 있도록 되어있다.

3-2-1 index.js파일

  • Next.js의 index.tsx 파일은 웹 애플리케이션의 홈페이지 역할을 하는 컴포넌트 파일로, 이 파일에서 default로 내보내는 컴포넌트는 보통 Home이라는 이름을 가지며, 해당 컴포넌트가 index 경로(/)에 연결된 페이지로 작동한다.
    즉, 사용자가 웹사이트의 루트 경로(/)에 접속하면, index.tsx 파일에 있는 Home 컴포넌트가 렌더링되며, 이 컴포넌트가 return하는 HTML 요소들이 브라우저에 표시된다.
    간단히 말해, index.tsx 파일은 Next.js 앱의 메인 페이지를 담당하는 파일이며, 그 안에 작성된 컴포넌트가 홈페이지에 표시되는 콘텐츠를 구성한다.

3-2-2 _app.tsx & _document.tsx파일

이 파일들은 pages폴더 밑에 있긴 하지만, page의 역할을 하는 파일들은 아니다. _app.tsx와 _document.tsx 파일은 모든 페이지에 공통적으로 적용되는 로직이나 공통적으로 적용될 레이아웃을 처리하는 파일이다.

📁 _app.tsx

Next.js의 App 컴포넌트는 React의 App 컴포넌트와 유사하게 모든 페이지의 부모 컴포넌트 역할을 한다. 이 컴포넌트는 Next.js 애플리케이션의 최상위(root) 컴포넌트로, 모든 페이지 역할들을 하는 컴포넌트들을 감싸는 부모 컴포넌트가 되어, 공통적으로 적용되는 레이아웃이나 로직을 처리할 수 있다.

import "@/styles/globals.css";
import type {AppProps} from "next/app";

export default function App({ Component, pageProps }:AppProps) {

  return <Component {...pageProps} />
}

App 컴포넌트의 주요 props

Component와 pageProps라는 두개의 props를 받고있다.

  • Component: 현재 렌더링될 페이지 컴포넌트를 나타낸다. 즉, 특정 경로로 이동할 때 렌더링되어야 하는 페이지가 Component로 전달된다.

  • pageProps: Component에게 전달될 page의 props들을 모두 객체로 보관해둔 props로, 페이지에 필요한 데이터를 담고 있다.

App 컴포넌트는 이 두 가지 props를 받아, return 문에서 현재 페이지 Component를 렌더링하고, 동시에 pageProps를 해당 페이지에 구조 분해 할당을 통해 전달하는 구조로 동작한다. (ex: <Component {...pageProps} />)

결론적으로 Next에서는 어떤 page를 rendering하던간에 App컴포넌트 밑에 page역할을 하는 컴포넌트가 렌더링 되는 구조로 렌더링 된다.

공통 요소 추가

  • Next.js 애플리케이션에서 모든 페이지에 공통적으로 나타나야 하는 요소(ex: header, footer)가 있다면, App 컴포넌트의 return 문 안에 추가할 수 있다. 이렇게 하면 모든 페이지에 공통된 레이아웃이나 전역적인 스타일을 적용할 수 있다.
return (
  <>
    <Header />
    <Component {...pageProps} />
    <Footer />
  </>
)
  • 이 구조 덕분에, 각 페이지에서 일일이 header나 footer를 추가할 필요 없이 모든 페이지에 자동으로 적용된다.

Next.js의 App 컴포넌트는 모든 페이지의 부모 컴포넌트 역할을 하며, 페이지 전역에 적용되는 레이아웃이나 비즈니스 로직을 처리할 수 있는 중요한 공간이다. 이를 통해 애플리케이션의 일관된 구조를 유지하고, 공통 로직을 손쉽게 관리할 수 있다.

📁 _document.tsx

_document.tsx 파일은 Next.js 애플리케이션에서 HTML 문서의 최상위 구조를 정의하는 역할을 한다. 이 파일은 Next.js의 모든 페이지에 공통적으로 적용되는 HTML 태그와 설정을 처리하며, React의 index.html과 유사한 역할을 한다고 볼 수 있다.

import { Html, Head, Main, NextScript } from "next/document";
import Link from "next/link";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        <Link type="image" rel="icon" href="/favicon.ico" />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

  • 전역적인 HTML 구조 설정: 모든 페이지에서 공통적으로 사용될 HTML 구조를 정의한다.

  • 메타태그 설정, 폰트 불러오기, charset설정, thirdparty script를 추가하기,... 페이지 전체에 적용되는 html태그를 관리하기 위해 사용하면 된다.

_document.tsx는 모든 페이지에 공통적으로 적용될 HTML 문서의 구조를 설정하는 파일로, 메타 태그 설정, 외부 리소스 로딩, 글로벌 스크립트 등을 처리한다. 이를 통해 각 페이지마다 중복된 설정을 하지 않고, 중앙에서 전체적인 HTML 구성을 관리할 수 있다.

3-2-3 next.config.js or next.config.mjs

next.config.js 파일은 Next.js 애플리케이션의 전반적인 설정을 관리하는 파일이다. 예를 들어, reactStrictMode가 기본적으로 true로 설정되어 있는데, 이는 애플리케이션에서 잠재적인 문제를 탐지하기 위해 개발 모드에서 컴포넌트를 두 번 렌더링하는 기능이다. 디버깅 시 불편할 수 있으므로 실습 중에는 false로 변경해도 무방하다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

export default nextConfig;

4. 결론

Next.js의 Page Router는 파일 및 폴더 기반으로 자동으로 라우팅을 설정해 주는 매우 편리한 기능이다. 이를 통해 개발자는 별도의 설정 없이 라우팅을 구성할 수 있으며, 특히 동적 경로 설정도 간단하게 처리할 수 있다. 또한, Next.js는 개발 모드에서 핫 리로딩과 같은 개발 편의 기능을 제공하고, 배포 시 프로덕션 모드로 최적화된 애플리케이션을 구동할 수 있어 React보다 더 강력한 개발 경험을 제공함.

profile
김채운
이전 포스트

[Nextjs] Next.js의 사전 렌더링: CSR의 단점을 해결

다음 포스트

[Nextjs] Page Routing 설정 (useRouter훅을 활용, Query String 사용하는 법)

post-custom-banner

0개의 댓글