Next.js 14 버전 설치 및 시작
필요 조건
Node.js 18.17 버전 이상.
자동 설치
npx create-next-app@latest
설치 옵션
// project name 설정
What is your project named? my-app
// TypeScript 사용여부
Would you like to use TypeScript? No / Yes
// ESLint 사용여부
Would you like to use ESLint? No / Yes
// Tailwind CSS 사용여부
Would you like to use Tailwind CSS? No / Yes
// src 디렉토리 사용여부
Would you like to use `src/` directory? No / Yes
// app router 사용여부
Would you like to use App Router? (recommended) No / Yes
// import alias 사용자 정의 여부
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
Scripts
dev
:next dev
를 실행하여 개발 모드에서 Next.js를 시작합니다.build
:next build
를 실행해 프로덕션 용도로 사용할 Next.js 애플리케이션을 빌드합니다.start
:next start
를 실행해 Next.js 프로덕션 서버를 시작합니다.lint
:next lint
를 실행해 Next.js 의 내장 ESLint 구성을 설정합니다.
Next.js 의 폴더 구조
Next.js는 파일 시스템 라우팅을 사용합니다. 즉, 파일 구조에 따라 애플리케이션의 경로가 결정됩니다.
app 폴더 구조
새로운 애플리케이션의 경우 앱 라우터를 사용하는 것이 좋습니다. 이 라우터를 사용하면 React의 최신 기능을 사용할 수 있다.
pages 폴더 구조
app 라우터 대신 pages 라우터를 사용하려는 경우 프로젝트 루트에 pages/
디렉터리를 만들어 사용할 수 있다.
※ 동일한 프로젝트에서 두 라우터를 모두 사용할 수 있지만 앱의 경로가 페이지보다 우선시됩니다. 혼란을 피하기 위해 새 프로젝트에서는 라우터를 하나만 사용하는 것이 좋습니다.
Next.js 프로젝트 구조
최상위 폴더 구성
- app : App 라우터
- pages(선택) : Pages 라우터
- public : Static assets
- src : source folder
최상의 파일 구성
파일 | 설명 |
---|---|
next.config.js | Next.js 구성 파일 |
package.json | Project dependencies and scripts |
instrumentation.ts | OpenTelemetry and Instrumentation file |
middleware.ts | Next.js 요청 미들웨어 |
.env | 환경 변수 |
.env.local | Local 환경 변수 |
.env.production | Production 환경 변수 |
.env.development | Development 환경 변수 |
.eslintrc.json | ESLint용 구성 파일 |
.gitignore | Git 에서 무시할 파일 및 폴더 |
next-env.d.ts | Next.js 용 TypeScript 선언 파일 (타입스크립트 컴파일러가 Next.js의 타입을 가져오는 용도) |
tsconfig.json | TypeScript 용 구성 파일 |
jsconfig.json | JavaScript 용 구성 파일 |
메타데이터 파일
아이콘 관련
파일 | 파일 형식 | 유효한 위치 | 예시 |
---|---|---|---|
favicon | .ico | app/ |
<link rel="icon" href="/favicon.ico" sizes="any/> |
icon | .ico .jpg .jpeg .png .svg | app/**/* |
<link rel="icon" href="/icon?<generated>" type="image/<generated>" sizes="<generated>"/> |
apple-icon | .jpg .jpeg, .png | app/**/* |
<link rel="apple-touch-icon" href="/apple-icon?<generated>" type="image/<generated>" sizes="<generated>"/> |
기타 이미지
파일 | 파일 형식 | 유효한 위치 |
---|---|---|
opengraph-image | .jpg .jpeg .png .gif | app/**/* |
opengraph-image | .js .ts .tsx | " |
opengraph-image.alt(대체 텍스트) | .txt | " |
twitter-image | .jpg .jpeg .png .gif | " |
twitter-image | .js .ts .tsx | " |
twitter-image.alt(대체 텍스트) | .txt | " |
SEO 관련
파일 | 파일 형식 | 유효한 위치 |
---|---|---|
sitemap | .xml | app/ |
sitemap | .js .ts | " |
robots | .txt | " |
robots | .js .ts | " |
'nextjs > next 14 공식 문서 부시기' 카테고리의 다른 글
[next 14 공식문서 부시기] 2.4. Error 처리와 Error boundary (0) | 2024.01.16 |
---|---|
[next 14 공식문서 부시기] 2.3. <Link> & navigating (0) | 2024.01.15 |
[next 14 공식문서 부시기] 2.2 Loading 페이지와 Streaming (0) | 2024.01.15 |
[next 14 공식문서 부시기] 2.1 Page & Layout (0) | 2024.01.13 |
[next 14 공식문서 부시기] 2. Next.js 라우팅 맛보기 (0) | 2024.01.12 |