Next.js란?
리액트에서 서버 사이드 렌더링을 간편하게 해주는 프레임워크
작동 방식
서버측에서 리액트 코드 실행
서버에서 리액트를 pre-렌더링을 통해 html 생성 → 브라우저에게 전송
브라우저에서 리액트를 이용하여 페이지 완성
장점
검색 엔진들이 html을 직접 검색할 수 있어 검색어 노출에 좋음 (SEO)
웹앱을 만들기 위한 조건
코드는 webpack과 같은 번들러를 사용하여 번들링, babel과 같은 컴파일러를 사용하여 변환
코드 분할과 같은 프로덕션 최적화를 수행해야 함
성능 향상과 SEO를 위해 일부 페이지를 정적으로 사전 렌더링함
리액트를 데이터 저장소에 연결하기 위해 서버 측 코드를 작성해야 함
주요 기능
직관적인 페이지 기반 라우팅 시스템
사전 렌더링, 정적 생성(SSG) 및 SSR 모두 페이지 단위로 지원
자동 코드 분할 (빠른 로딩)
최적화된 프리 패치를 통한 클라이언트 측 라우팅
모든 CSS-in-JS 라이브러리 지원
빠른 리프레시 가능 (Fast Refresh)
프로젝트 시작 방법
npx create-next-app (프로젝트명)
npx create-next-app@latest —ts 타입스크립트
서버 실행 명령어
npm run dev
폴더 구조
| public | static 파일들 저장 |
|---|---|
| pages | 화면 페이지들 저장 |
| pages/index.js | index 페이지 (/) 파일 |
| pages/_app.js | 모든 페이지에 공통으로 사용되는 컴포넌트 |
| 모든 페이지에 레이아웃 설정할 때 사용 | |
| styles | css 파일들 저장 |
| styles/globals.css | 전체 페이지에 적용되는 스타일 파일 |
| styles/Home.module.css | index.js 파일에서 사용하는 스타일 파일 |
| .eslintrc.json | 정적 코드 분석 툴인 ESLint 설정에 관한 파일 |
| next.config.js | Next.js 프로젝트 설정에 관한 파일 |
| package.json | 개발에 필요한 라이브러리 관리 파일 |
Prettier 설정
.prettierrc.js 파일 생성
module.exports = {
semi: false,
singleQuote: true,
trailingComma: 'all',
}
//semi : Next.js는 기본적으로 ; 를 사용 안함
//singleQuote : Next.js는 기본적으로 '' 사용
//trailingComma : 변경 사항을 최소화하기 위해 , 추가할 수 있으면 마지막에 추가package.json 스크립트 추가
"scripts": {
...
"format": "prettier --check --ignore-path .gitignore .",
"format:fix": "prettier --write --ignore-path .gitignore ."
},npm run format
npm run format:fix
