[TIL] sparta 58일차 - Next.js 사용해보기

 

 

next.js 설치

npx create-next-app@latest

yarn create next-app

 

 

설치 시 다음 메시지가 표시된다

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

 

 

Next.js 프로젝트 구조

 

최상위 폴더

app	앱 라우터
pages	페이지 라우터
public	제공할 정적 자산
src	선택적 애플리케이션 소스 폴더

 

 

최상위 파일

next.config.js	Next.js 구성 파일
package.json	프로젝트 종속성 및 스크립트
instrumentation.ts	OpenTelemetry 및 계측 파일
middleware.ts	Next.js 요청 미들웨어
.env	환경 변수
.env.local	로컬 환경 변수
.env.production	프로덕션 환경 변수
.env.development	개발 환경 변수
.eslintrc.json	ESLint용 구성 파일
.gitignore	무시할 Git 파일 및 폴더
next-env.d.ts	Next.js용 TypeScript 선언 파일
tsconfig.json	TypeScript용 구성 파일
jsconfig.json	JavaScript용 구성 파일

 

 

File Convention

page.js

페이지는 경로에 고유한 UI입니다

 

 

 

Next.js는 자동 동적 라우팅을 지원해서

src > app 내에서 원하는 경로명의 폴더를 만들고 page.jsx page.tsx를 만들면 된다