Next.js 완벽 가이드: 개발 환경부터 실전 활용까지
1. 개발 환경 세팅
Node.js 설치하기
- Google에서 'Node.js' 검색 후 공식 사이트 방문
- LTS(Long Term Support) 버전 다운로드
- 버전 18 이상 권장 (16 이하는 호환성 문제 발생 가능)
- 운영체제에 맞는 설치 파일 실행
- Mac, Windows 모두 동일한 개발 환경 구성 가능
VS Code 설치하기
- Google에서 'VS Code' 검색
- 공식 사이트에서 다운로드
- 설치 완료 후 실행
작업 폴더 생성 및 프로젝트 시작
- 바탕화면이나 원하는 위치에 작업 폴더 생성
- VS Code에서 File → Open Folder로 작업 폴더 열기
- 터미널 열기 (상단 메뉴 Terminal → New Terminal)
- Next.js 프로젝트 생성 명령어 입력
Next.js 프로젝트 생성 옵션
- 프로젝트 이름 설정
- 원하는 이름으로 자유롭게 지정
- TypeScript 사용 여부
- 방향키로 선택 후 Enter
- ESLint 설정
- 코드 품질 관리 도구 (선택사항)
- src 디렉토리 사용 여부
- App Router 사용 여부
- 최신 기능 사용을 위해 권장
- import alias 설정
2. 프로젝트 파일 구조 이해하기
주요 폴더 및 파일 설명
app
폴더- 프로젝트의 핵심 폴더
- 페이지와 라우팅 관련 파일들 포함
page.js
- 메인 페이지 파일
- 실제 화면에 보여질 컨텐츠 작성
layout.js
- 페이지의 공통 레이아웃
- 모든 페이지를 감싸는 컴포넌트
- 헤더, 푸터 등 공통 UI 포함
node_modules
- 프로젝트 라이브러리 보관
- git에 포함되지 않음
public
폴더- 이미지, 폰트 등 정적 파일 저장
- 외부에서 직접 접근 가능
package.json
- 프로젝트 설정 파일
- 라이브러리 버전 정보
- 실행 명령어 등 포함
3. Next.js 기본 문법
JSX 문법 특징
컴포넌트 기본 구조
export default function MainPage() { return ( <div> 내용 </div> ) }
한 컴포넌트에서 여러 요소 반환 시 주의사항
// 잘못된 예시 return ( <div>첫 번째</div> <div>두 번째</div> // 에러 발생 )
// 올바른 예시
return (
첫 번째
두 번째
)
3. class 대신 className 사용
```jsx
// 잘못된 예시
<div class="container"> // 에러 발생
// 올바른 예시
<div className="container">
데이터 바인딩
변수 출력하기
let name = '홍길동'; return ( <div>{name}</div> )
HTML 속성에 변수 바인딩
let img = 'photo.jpg'; return ( <img src={'/images/' + img} /> )
style 바인딩
// 인라인 스타일 적용 <div style={{color: 'red', fontSize: '20px'}}>
4. 라우팅 시스템
기본 라우팅
폴더 구조 기반 라우팅
app/list/page.js
→/list
URLapp/cart/page.js
→/cart
URL
페이지 생성하기
// app/list/page.js export default function ListPage() { return ( <div>상품 목록 페이지</div> ) }
레이아웃 시스템
layout.js 기본 구조
export default function Layout({ children }) { return ( <div> <nav>네비게이션 바</nav> {children} </div> ) }
레이아웃 중첩
- 상위 폴더의 layout.js가 하위 페이지에 자동 적용
- 여러 레이아웃을 중첩해서 사용 가능
5. 컴포넌트 시스템
서버 컴포넌트 (기본값)
특징
- 자바스크립트 이벤트 핸들러 사용 불가
- 빠른 로딩 속도
- SEO 최적화에 유리
기본 구조
export default function ServerComponent() { return ( <div> <h1>서버 컴포넌트입니다</h1> </div> ) }
클라이언트 컴포넌트
- 선언 방법
'use client'
export default function ClientComponent() {
const handleClick = () => {
alert('클릭됨')
}
return (
)
}
2. 특징
- 인터랙티브한 기능 구현 가능
- React Hooks 사용 가능
- 하이드레이션 과정 필요
- 상대적으로 느린 로딩 속도
## 6. 파일 분리와 모듈화
### export/import 시스템
1. default export
```jsx
// data.js
export default ['데이터1', '데이터2']
// page.js
import data from './data.js'
- named export
// data.js export const name = '홍길동' export const age = 20
// page.js
import { name, age } from './data.js'
### 경로 지정 방법
1. 같은 폴더 내 파일
```jsx
import { name } from './data.js'
상위 폴더 파일
import { name } from '../data.js'
하위 폴더 파일
import { name } from './subfolder/data.js'
7. 이미지 처리
기본 이미지 태그
<img src="/product.jpg" className="product-img" />
Next.js Image 컴포넌트
import Image from 'next/image'
<Image
src="/product.jpg"
width={500}
height={300}
alt="상품 이미지"
/>
이미지 최적화 기능
- 자동 이미지 최적화
- 레이지 로딩
- 레이아웃 시프트 방지
- 외부 이미지 사용 시 주의사항
- width, height 필수 지정
- 도메인 설정 필요
8. 개발 시 Best Practices
컴포넌트 설계
- 재사용성이 높은 UI는 컴포넌트로 분리
- 적절한 컴포넌트 크기 유지
서버/클라이언트 컴포넌트 활용
- 기본적으로 서버 컴포넌트 사용
- 인터랙티브 기능이 필요한 부분만 클라이언트 컴포넌트로 전환
파일 구조
- 명확한 폴더 구조 유지
- 관련 파일들을 함께 관리
성능 최적화
- 이미지 최적화 기능 활용
- 적절한 컴포넌트 분리로 렌더링 최적화
마무리
Next.js는 React 기반의 강력한 프레임워크로, 서버 사이드 렌더링과 정적 생성을 지원하며 직관적인 라우팅 시스템을 제공합니다. 이 글에서 다룬 내용을 기반으로 실제 프로젝트를 진행하면서 더 깊이 있는 학습을 진행하시기 바랍니다.
다음 단계로는 다음과 같은 내용을 학습하면 좋습니다:
- 데이터 페칭
- API 라우트 생성
- 상태 관리
- 배포 방법
반응형
'IT > 프로그램' 카테고리의 다른 글
Next.js + Supabase로 인증 기능이 있는 노트 앱 만들기 (1) | 2024.11.12 |
---|---|
Angular와 Supabase로 채팅앱 만들기 (0) | 2024.10.28 |
Google Sheets와 Apps Script를 활용한 YouTube 데이터 크롤링 (4) | 2024.10.03 |