[next 14 공식문서 부시기] 1. 설치 및 시작

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	"