[Next] Next.js 시작하기

Next.js는 React 기반의 오픈소스 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원하며, 현대적인 웹 애플리케이션을 쉽고 빠르게 개발할 수 있도록 설계되었습니다.

 

목차

1. Next.js 특징

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

3. Next.js 실행

4. Next.js 폴더 구조

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. Next.js 특징

1. 서버 사이드 렌더링 (SSR)

Next.js는 서버에서 HTML을 렌더링 하여 클라이언트로 보내는 SSR을 지원합니다. 이를 통해 SEO(검색 엔진 최적화)에 유리하며, 초기 로딩 속도가 향상됩니다.

2. 정적 사이트 생성 (SSG)

정적 사이트 생성은 빌드 시 HTML 파일을 생성하여 요청 시 빠르게 제공할 수 있는 방식입니다. 블로그, 문서화 사이트 등에서 최적의 성능을 발휘합니다.

3. 파일 기반 라우팅

Next.js는 pages 폴더를 기반으로 자동으로 라우팅을 설정합니다. 복잡한 라우팅 설정 없이 파일 구조만으로 페이지를 정의할 수 있습니다.

4. API Routes

서버와 클라이언트의 경계를 허물며, Next.js 내에서 서버리스 함수 형태로 API를 구축할 수 있습니다.

5. 이미지 최적화

Next.js는 내장 이미지 최적화 기능을 제공하여 성능을 극대화합니다. 이를 통해 자동 크기 조정, 포맷 변경(WebP 지원), 레이지 로딩 등의 이점을 누릴 수 있습니다.

 

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

1. Node.js 버전 16 이상 설치

Node.js — Run JavaScript Everywhere

2. Next.js 프로젝트 생성

npx create-next-app@latest 프로젝트_이름

 

위 명령어를 실행하면 아래와 같은 옵션 선택 화면이 나옵니다.

 

• TypeScript 사용 여부 : TypeScript는 JavaScript의 확장 버전으로, 코드에서 발생할 수 있는 오류를 미리 방지할 수 있습니다.
• ESLint 설정 추가 여부 : 코드의 스타일과 품질을 검사하고, 문제를 자동으로 수정할 수 있도록 돕는 정적 코드 분석 도구입니다.
• Tailwind CSS 통합 여부 : Tailwind CSS는 유틸리티 기반 CSS 프레임워크로, 클래스 이름을 사용해 직접 스타일을 지정합니다.
• 소스 디렉터리 분리 여부 (src 디렉터리 사용) : Next.js는 기본적으로 프로젝트 루트 디렉터리에 pages/, public/ 등의 디렉터리를 둡니다. 옵션을 yes로 설정하면 소스 디렉터리를 src/로 분리합니다.
• import alias 설정 여부 : 코드에서 긴 상대 경로(../../../utils/func) 대신 간단한 별칭(@/utils/func)을 사용하도록 설정하는 기능입니다.

필요한 옵션을 선택하면 프로젝트 설치가 완료됩니다.

 

3. Next.js 프로젝트 실행

프로젝트 디렉터리로 이동하여 개발 서버를 시작합니다.

cd 프로젝트_이름
npm run dev

 

명령어 실행 후 http://localhost:3000에 접속하면 Next.js 애플리케이션이 실행됩니다.

 

4. Next.js 폴더 구조

my-next-app/
├── pages/           # 페이지 정의
│   ├── api/         # API Routes 폴더
│   ├── index.js     # 메인 페이지
|   ├── _document.js # HTML 문서의 기본 구조를 커스터마이징
│   └── _app.js      # 페이지 전환 시 유지되는 상태 관리와 전역 스타일링을 처리
├── public/          # 정적 파일 (이미지, 폰트 등)
├── styles/          # 전역 및 모듈 스타일 파일
├── node_modules/    # 의존성 모듈
├── package.json     # 프로젝트 설정 및 의존성 목록
└── next.config.js   # Next.js 설정 파일

 

 

 

Next.js는 React 생태계에서 가장 강력하고 인기 있는 프레임워크 중 하나로, 최신 웹 개발 요구 사항에 완벽히 부합합니다. 서버 사이드 렌더링, 정적 사이트 생성, 이미지 최적화, API Routes 등 다양한 기능이 통합되어 있어, 초보자부터 전문가까지 누구나 쉽게 사용할 수 있는 도구입니다.

 

 

[React] Compound Component Pattern

 

[TS] any 타입 - 편리함과 위험함 사이