Next.js 기초

개요

React는 UI 라이브러리지만, Next.js는 React를 기반으로 서버와 클라이언트의 경계를 넘나드는 풀스택 프레임워크입니다. SEO 최적화, 뛰어난 성능, 쉬운 라우팅 등 웹 개발의 복잡한 부분을 추상화하여 개발자는 오직 애플리케이션 로직에만 집중할 수 있게 해줍니다.

핵심 개념

Next.js의 핵심은 다양한 렌더링 방식과 라우팅 시스템입니다.

주요 기능

Next.js는 개발 편의성과 성능 최적화를 위한 다양한 기능을 제공합니다.

• 이미지 최적화: <Image> 컴포넌트를 통해 자동으로 이미지를 최적화하고 지연 로딩합니다.
• 코드 스플리팅: 페이지별로 필요한 자바스크립트만 로드하여 초기 로딩 속도를 개선합니다.
• 데이터 페칭(Data Fetching): getStaticProps, getServerSideProps 등 다양한 데이터 패치 함수를 제공합니다.
• 환경 변수: .env 파일을 사용하여 환경 변수를 쉽게 관리할 수 있습니다.

사용 예제

파일 시스템 라우팅을 활용한 간단한 페이지 예제입니다. (pages 디렉토리 사용 기준)

import Link from 'next/link';

export default function AboutPage() {
  return (
    <div>
      <h1>소개 페이지</h1>
      <p>이것은 Next.js로 만들어진 페이지입니다.</p>
      <Link href="/">
        <a>홈으로 돌아가기</a>
      </Link>
    </div>
  );
}

pages/api/hello.js 파일 생성 시 /api/hello 경로로 접근 가능합니다.

export default function handler(req, res) {
  res.status(200).json({ name: 'Hello, API Routes' });
}

주의사항 및 팁

• create-next-app 명령어를 통해 보일러플레이트 코드를 쉽게 생성할 수 있습니다.
• getServerSideProps는 매 요청마다 실행되므로 데이터가 자주 변하는 페이지에 적합합니다.
• getStaticProps는 빌드 시점에 한 번만 실행되므로, 정적 콘텐츠 페이지에 적합합니다.