next.js 사용법

alpha2025-04-06 23:51

how to use next.js

Next.js는 리액트(React) 기반의 프레임워크로, 전체 스택 웹 애플리케이션을 구축하는 데 유용합니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅, 데이터 페칭 등 다양한 기능을 기본으로 제공함으로써, 개발자가 설정과 구성보다는 애플리케이션 개발에 집중할 수 있도록 도와줍니다. 이 문서에서는 Next.js를 사용하는 방법과 기본 기능들을 알아보겠습니다.

Next.js 설치 및 프로젝트 생성

시스템 요구사항

Node.js 18.18 이상

자동 설치

다음의 명령어를 통해 새 Next.js 애플리케이션을 자동으로 설정할 수 있습니다.

npx create-next-app@latest

설치 과정에서 다음과 같은 프롬프트가 나타납니다:

프로젝트 이름
TypeScript 사용 여부
ESLint 사용 여부
Tailwind CSS 사용 여부
src/ 디렉토리 사용 여부
App Router 사용 여부 (권장)
Turbopack 사용 여부
임포트 별칭 커스터마이징 여부

수동 설치

다음 명령어를 통해 필요한 패키지를 수동으로 설치할 수 있습니다:

npm install next@latest react@latest react-dom@latest

그 후 package.json 파일에 필요한 스크립트를 추가해야 합니다:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

다음 스크립트는 애플리케이션 개발 단계에 따라 사용됩니다:

dev: 개발 모드로 Next.js 실행
build: 애플리케이션을 프로덕션 사용을 위해 빌드
start: 프로덕션 서버 시작
lint: ESLint 설정 실행

파일 구조 및 라우팅

Next.js는 파일 시스템 기반의 라우팅을 사용합니다. 다음은 파일 및 디렉토리를 만드는 예입니다:

app/layout.tsx: 루트 레이아웃. Next.js는 루트 레이아웃을 통해 각 페이지를 감싼 레이아웃을 제공합니다.
app/page.tsx: 초기 콘텐츠가 있는 홈 페이지 컴포넌트.
public 폴더: 이미지, 폰트 등의 정적 자산을 저장하는 디렉토리.

이와 같은 파일 구조를 가지는 Next.js 프로젝트를 생성하면, 프로젝트의 홈 페이지는 http://localhost:3000에서 확인할 수 있습니다.

TypeScript 설정

Next.js는 기본적으로 TypeScript를 지원합니다. .js 파일들을 .ts 또는 .tsx로 확장자를 변경하면, 자동으로 필요한 TypeScript 패키지를 설치하고 tsconfig.json 파일을 생성합니다.

ESLint 설정

Next.js는 기본적으로 ESLint를 내장하고 있습니다. 기존 프로젝트에 ESLint를 추가하려면 package.json 파일에 다음 스크립트를 추가합니다:

{
  "scripts": {
    "lint": "next lint"
  }
}

명령어 npm run lint를 실행하면 설치 및 구성 과정이 안내됩니다. Next.js는 Strict 설정과 Base 설정을 제공합니다. Strict 설정은 Next.js의 기본 ESLint 구성과 Core Web Vitals 규칙을 포함합니다.

데이터 페칭

Next.js에서는 클라이언트 컴포넌트와 서버 컴포넌트를 사용해 클라이언트 측과 서버 측에서 데이터를 페칭할 수 있습니다. getStaticProps, getServerSideProps와 같은 데이터 페칭 메소드를 제공하며, 서버 컴포넌트에서 페칭한 데이터를 클라이언트 컴포넌트에서 사용할 수도 있습니다.

// pages/posts.js

import React from "react";

export async function getStaticProps() {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/");
    const data = await response.json();

    return {
        props: {
            posts: data,
        },
    };
}

export default function Posts({ posts }) {
    return (
        <div>
            <h1>List of Posts</h1>
            <ul>
                {posts.map((post) => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </div>
    );
}

결론

Next.js는 리액트 애플리케이션을 더욱 쉽고 빠르게 개발할 수 있도록 다양한 기능을 제공합니다. 서버 사이드 렌더링, 코드 스플리팅, 정적 사이트 생성 등 많은 기능을 제공하여 더 나은 사용자 경험과 SEO 최적화를 구현할 수 있습니다. Next.js의 풍부한 기능을 활용해 더욱 효율적인 웹 애플리케이션을 개발해보세요.