Next.js 공식문서 (번역, 공부)

Routing

라우팅 기초 용어 Tree: 계층구조를 보여주는 컨벤션이다. 예를 들어, 부모와 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 등이 있다. Subtree: 트리의 일부이다. Root: 루트 레이아웃과 같은 트리나 서브트리의 가장 첫번째 노드이다. Leaf: URL 경로의 마지막 부분 같은 자식이 없는 서브트리의 노드이다. URL Segment: 슬래시(/)로 구분지어지는 URL 경로의 부분이다. URL Path: 도메인 뒤에 오는 URL의 부분이다. 폴더와 파일의 역할 폴더는 라우트를 정의하는데 사용된다. 파일은 라우트 세그먼트에 보여지는 UI를 만드는데 사용된다. 파일 컨벤션 Next.js는 중첩 라우트에서 특정 행동을 하는 UI를 만들기 위한 특별한 파일 세트를 제공한다. layout: 세그먼트와 ..

Project Structure

최상위 폴더 app : app 라우터 public : 정적 에셋들을 저장하는 폴더 src: 소스 파일들을 저장하는 폴더 최상위 파일 next.config.js : next.js 설정파일 package.json : 프로젝트 의존성과 스크립트들 instrumentation.ts : 오픈텔레메트리와 계측 파일(?) middleware.ts : Next.js가 요청하는 미들웨어 .env : 환경 변수 .env.local : 지역 환경 변수 .env.production : 배포 환경 변수 .env.development : 개발 환경 변수 .eslintrc.json : ESLint를 위한 설정 파일 .gitignore next-env.d.ts : Next.js를 위한 타입스크립트 선언 파일 tsconfig.json..

Installation

Node.js 18.17이나 그 이상의 버전이 필요! 자동 설치 npx create-next-app@latest next 최신 버전으로 자동 설치! TypeScript, ESLint, Tailwind CSS 등 선택하여 자동으로 설치하게 할 수 있다. 수동 설치 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 dev로 시작하면, 개발 모드에서..