Next.js - (4) 커스텀 컴포넌트 설정

 

안녕하세요. 이번 포스트에서는 Next.js에서 커스텀 컴포넌트를 생성하고 사용하는 방법을 알아보겠습니다.
React를 사용해보셨다면 매우 익숙한 내용일 거예요.

 

🎯 커스텀 컴포넌트란?

기존 React 프로젝트와 마찬가지로, Next.js에서도 UI를 구성하는 요소들을 별도의 컴포넌트 파일로 나누어 재사용할 수 있습니다. 예를 들어, 다음과 같은 Home 페이지가 있다고 가정해보겠습니다.

import Link from "next/link";

// app/page.js
export default function Home() {
  return (
    <main>
      <img src='/logo.png' alt='A server surrounded by magic sparkles.' />
      <h1>Welcome to this NextJS Course!</h1>
      <p>🔥 Let&apos;s get started! 🔥</p>
      <p>
        <Link href='/about'>About us</Link>
      </p>
    </main>
  );
}

 

이 중 이미지와 제목(h1) 부분을 별도의 컴포넌트로 분리해보겠습니다.

 

 

 

📁 components 폴더와 Header 컴포넌트 생성

루트 디렉터리에 components 폴더를 만들고, Header.js라는 이름의 파일을 생성합니다. 그 안에 아래와 같이 코드를 작성해 주세요

 

function Header() {
  return (
    <>
      <img src='/logo.png' alt='A server surrounded by magic sparkles.' />
      <h1>Welcome to this NextJS Course!</h1>
    </>
  );
}

export default Header;

 

이렇게 하면 Header라는 독립적인 컴포넌트를 만들 수 있습니다.

🔍 참고: components 폴더에는 page.js 같은 특수 파일명을 사용하지 않기 때문에, Next.js는 이 폴더를 라우터 경로로 인식하지 않습니다. 즉, 컴포넌트 저장용으로만 사용됩니다.

 

 

 

📦 Header 컴포넌트 사용하기

이제 위에서 만든 Header 컴포넌트를 Home 페이지에서 불러와 사용해보겠습니다.

import Header from "@/components/header";
import Link from "next/link";

export default function Home() {
  return (
    <main>
      <Header />
      <p>🔥 Let&apos;s get started! 🔥</p>
      <p>
        <Link href='/about'>About us</Link>
      </p>
    </main>
  );
}

 

Next.js에서는 @/를 통해 프로젝트 루트 경로를 참조할 수 있습니다.

이를 위해 jsconfig.json 혹은 tsconfig.json 파일에서 다음과 같이 경로를 설정해야 합니다

 

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

 

이 설정을 통해 더 깔끔하고 유지보수가 쉬운 import 경로를 사용할 수 있습니다.

 

NextJS에는 일부 보호된 파일명이 있습니다.

 

 

📄 Next.js의 보호된 파일명(Reserved Filenames)

Next.js에서는 특정 파일명을 특별하게 인식합니다. 이 파일들은 모두 app/ 폴더 안에서만 특별한 역할을 가지며, components/ 폴더 등 라우팅과 무관한 폴더에서는 일반 파일처럼 동작합니다.

 

다음은 대표적인 보호된 파일명 목록입니다

 

page.js	새로운 페이지 생성 (app/about/page.js → /about 라우팅)
layout.js	레이아웃(껍데기) 정의, children으로 내부 페이지 감쌈
not-found.js	404 페이지 커스터마이징
error.js	일반 오류 발생 시 보여줄 UI
loading.js	데이터 로딩 중 표시할 UI
route.js	API 라우팅 정의 (JSX 아닌 데이터 반환용)

 

 

공식 문서에서 보호된 파일명 전체 목록과 역할을 확인하실 수 있습니다:
👉 File Conventions – Next.js 공식 문서

API Reference: File-system conventions | Next.js

 

 

✅ 마무리

이번 포스트에서는 Next.js에서 컴포넌트를 생성하고 활용하는 방법을 알아보았습니다.
Next.js는 기본적으로 React 위에서 동작하기 때문에, 기존의 React 개발 방식과 매우 유사합니다. 다만, 파일 기반 라우팅 시스템과 일부 보호된 파일명만 잘 기억하시면 됩니다.