[Next.js] Page Router? Next.js에서 클릭 몇 번이면 끝난다고! 1탄

Next.js를 쓰다 보면 "어? 이건 어떻게 하지?" 싶은 순간들이 있습니다. 

이번에는 네비게이션, 프리패칭, 그리고 레이아웃 설정을 쉽게 이해할 수 있도록 정리해볼게요. 

어렵게 생각하지 말고 가볍게 읽어주세요!

---

01

네비게이션

페이지를 쉽게 이동하는 방법, 한번 알아볼까요?

Next.js에서 페이지 이동은 정말 간단합니다. Link 컴포넌트와 useRouter 훅만 기억하면 됩니다.

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

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();

  const onClickBtn = () => {
    router.push("/test"); // 페이지 이동
    router.replace("/test"); // 뒤로가기 방지하며 이동
  };

  return (
    <>
      <header>
        <Link href={"/"}>Home</Link>
        &nbsp;
        <Link href={"/search"}>Search</Link>
        &nbsp;
        <Link href={"/movie/1"}>Movie/1</Link>
        <div>
          <button onClick={onClickBtn}>/test 페이지로 이동</button>
        </div>
      </header>
      <Component {...pageProps} />
    </>
  );
}

 

 

" 여기서 포인트! "

useRouter와 Link는 Next.js에서 네비게이션을 구현할 때 핵심적인 역할을 합니다.

• Link 컴포넌트: 정적인 페이지 이동에 사용됩니다. 사용이 간단하며, 기본적으로 프리패칭이 적용되어 빠른 이동을 제공합니다.
• router.push: 원하는 URL로 동적으로 페이지를 이동합니다. 버튼 클릭 등 특정 이벤트에서 주로 사용됩니다.
• router.replace: URL은 변경되지만, 브라우저의 뒤로 가기 버튼으로 이전 페이지로 돌아갈 수 없게 만듭니다. 페이지 히스토리를 남기고 싶지 않을 때 유용합니다.
• router.prefetch: 지정된 URL의 페이지를 미리 로드합니다. 네트워크 상태가 좋을 때 빠른 페이지 전환을 위해 사용하세요.

---

---

02

프리패칭

프리패칭은 말 그대로 미리 불러오기입니다.  "미리 불러오기"를 통해 페이지 로딩 속도를 높이는 방법입니다.

사용자가 이동할 가능성이 높은 페이지를 먼저 가져와 빠르게 보여줄 수 있습니다.

프리패칭이 왜 필요할까?

Next.js는 처음에 현재 페이지와 관련된 JavaScript 파일만 제공합니다.

이렇게 하면 초기 로딩은 빠르지만, 새 페이지를 열 때 약간 느려질 수 있죠.

그래서 미리 가져와 빠르게 보여주는 게 프리패칭입니다.

const router = useRouter();

const onClickBtn = () => {
  router.push("/test");
};

useEffect(() => {
  router.prefetch("/test"); // /test 페이지를 미리 로드
}, []);

 

프리패칭 끄기

사용자가 자주 가지 않을 페이지는 프리패칭을 끌 수 있어요.

자원을 아끼고 네트워크 요청을 줄일 수 있습니. 꼭 필요한 페이지에만 프리패칭을 쓰면 더 효율적입니다.

<Link href="/search" prefetch={false}>Search</Link>

 

" 참고! "

• 개발 모드(npm run dev)에서는 프리패칭이 동작하지 않습니다.
  이는 개발 중 변경 사항 반영을 우선하기 위해서입니다.
• 빌드(npm run build) 후에만 프리패칭이 정상적으로 작동하니,
  최종 결과를 확인할 때 꼭 빌드를 실행하세요.

프리패칭 실생활 예시

예를 들어, "회원가입 완료" 페이지와 같이 사용 빈도가 낮고 한 번만 방문할 가능성이 높은 페이지는 프리패칭을 끄는 것이 좋습니다!!

---

03

API Routes: 간단한 백엔드 만들기

Next.js에서는 /pages/api 폴더 안에 파일을 만들어 간단히 API를 구현할 수 있습니다.
이 API는 서버리스 함수 형태로 동작하며, 작은 규모의 백엔드를 구축할 때 특히 유용합니다.

// /pages/api/hello.ts
export default function handler(req, res) {
  if (req.method === 'GET') {
    res.status(200).json({ message: "Hello World!" });
  } else {
    res.status(405).json({ message: "Method Not Allowed" });
  }
}

 

 

응용하기

- 간단한 데이터 처리: 위 코드처럼 특정 요청 메서드(GET, POST 등)에 따라 다른 응답을 처리할 수 있습니다.

-  API 통합: 외부 API와 연결하여 데이터를 가져오거나 가공한 결과를 반환하는 미들웨어로도 활용 가능합니다.

-  유효성 검사: 요청 데이터를 검증하고 필요한 데이터를 처리하는 간단한 백엔드 로직을 추가할 수 있어요.

여기서 기억할 점!

-  서버리스 함수: API Routes는 요청이 들어올 때만 실행되므로 비용 효율적입니다.

-  제한된 사용 사례: 서버리스 특성상 긴 시간 동안 실행되어야 하는 작업에는 적합하지 않습니다.

-  공식 문서에서 더 많은 내용을 확인 부탁드려요!

 

---

04

스타일링

Next.js에서 스타일링은 크게 3가지 방법이 있어요: 인라인 스타일, CSS 모듈, 전역 스타일

인라인 스타일

가장 간단하지만 유지보수가 어려울 수 있습니다.

export default function Home() {
  return <h1 style={{ color: "red" }}>ONEBITE CINEMA</h1>;
}

 

CSS 모듈과 일반 CSS

CSS 모듈(.module.css)은 일반 CSS(.css)와 다르게

각 클래스 이름을 고유하게 만들어서 다른 컴포넌트와의 충돌을 방지해줍니다.

예를 들어, 일반 CSS는 동일한 클래스 이름이 있으면 스타일이 덮어씌워질 수 있지만,

CSS 모듈은 각 컴포넌트 내에서만 해당 스타일이 적용되도록 보장합니다.

 

" CSS 모듈 "

CSS 모듈을 사용하면 클래스 이름 충돌 없이 스타일을 작성할 수 있어요

/* styles/Home.module.css */
.title {
  color: blue;
}


import styles from "@/styles/Home.module.css";

export default function Home() {
  return <h1 className={styles.title}>ONEBITE CINEMA</h1>;
}

 

" 언제 CSS 모듈을 써야 할까? "
- 컴포넌트 단위로 스타일을 적용하고 싶을 때
- 다른 컴포넌트와의 스타일 충돌을 방지하고 싶을 때

 

전역 스타일

전역 CSS는 _app.tsx에서만 불러올 수 있습니다. 다른 곳에서 불러오면 충돌이 날 수 있으니 주의하세요.

---

05

레이아웃

페이지마다 다른 레이아웃을 적용하고 싶을 때는 getLayout 메서드를 사용하면 됩니다.

 

레이아웃 적용 예시

// index.tsx
Home.getLayout = (page: ReactNode) => {
  return <SearchableLayout>{page}</SearchableLayout>;
};

 

예외 처리하기

레이아웃이 없는 페이지에서 오류가 나지 않도록 _app.tsx에서 처리해줘야 해요.

import { ReactNode } from "react";

export default function App({ Component, pageProps }: AppProps) {
  const getLayout = Component.getLayout ?? ((page: ReactNode) => page);
  return <GlobalLayout>{getLayout(<Component {...pageProps} />)}</GlobalLayout>;
}

 

---

06

마무리

이번 글에서는 네비게이션, 프리패칭, API Routes, 스타일링, 그리고 레이아웃 관리 방법을 정리해봤습니다. 

각각의 섹션을 다시 한번 간단히 요약하면:

1. 네비게이션: Link와 useRouter를 기억하세요!
2. 프리패칭: 빠른 로딩을 위해 꼭 필요한 페이지에만 사용하세요.
3. API Routes: 간단한 백엔드 API를 구현할 때 유용해요.
4. 스타일링: CSS 모듈로 클래스 충돌 없이 스타일링을 해보세요.
5. 레이아웃: 페이지별로 개별 레이아웃을 적용할 때 getLayout을 활용