Nextjs란?
Next.js는 풀스택 웹 애플리케이션을 빌드하기 위한 React 프레임워크입니다.
기본적으로 React Component로 사용자 인터페이스를 구성하고 이를 기반으로 번들링, 컴파일 등과 같이 React에 대한 툴링을 추상화 하고 자동으로 구상
주요 특징
Next.js의 주요 기능
- Routing : 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등이 가능한 라우팅
- Rendering : 클라이언트 및 서버 구성 요소를 사용한 클라이언트 측 렌더링과 서버 측 렌더링이 가능하고 nextjs 를 사용한 서버에서 정적 및 동적 렌더링 까지 지원한다.
- Data Fetching : 서버 구성 요소에서 async/await를 사용하여 간소화된 데이터 가져오기가 가능하고 fetch 요청 메모 생성, 데이터 캐싱 및 재검증을 위한 API 또한 제공이됨
- Styling : css module, tailwind css, css-in-js 까지 가능하고 utility CSS를 지원하여 사용자 경험을 개선 가능
- Optiimizations : 이미지, 글골 및 스크립트를 최적화 하여 애플리케이션의 사용자 경험 개선 가능
- Typescript : 더 나은 유형 검사와 더 효율적인 컴파일이 가능하고 사용자 정의 typesciprt 플러그인과 유형 검사기가 가능
App router
Next.js 앱 라우터는 서버 컴포넌트 , Suspense를 통한 스트리밍 , 서버 액션 과 같은 React의 최신 기능을 사용하여 애플리케이션을 구축하기 위한 새로운 모델을 소개합니다 .
특징
- 상태를 유지하고 Rerendering을 방지하면서 자체 경로 안의 컴포넌트와 UI를 쉽게 공유할 수 있다.
이제 App Router는 https://프로젝트/dashboard 라우팅을 위해 /app/dashboard/page.js 파일을 생성해야 한다. - app router 에서는 directory 상으로 layout 이 포함이 되어 있는데 렌더되고 난 이후에는 layout은 다시 렌더가 되지 않는다. 페이지간을 이동할 때 불필요한 렌더를 피하고 캐시하고 재사용할 수 있게끔 되어있다.
설치하기
terminal 부분에서 npx create-next-app@latest -> @latest 같은 경우 최신 버전을 얘기한다.
npx와 npm의 차이 npm은 패키지 설치 및 관리 및 스크립트를 실행하고 npx 같은 경우 일회성 명령어 실행을 위한 도구이다.
패키지 관리와 일회성 명령어 실행 이런 차이라고 생각하면 좋다.
npx create-next-app@latest <프로젝트이름>
✔ Would you like to use TypeScript? … Yes # 타입스크립트 사용 여부
✔ Would you like to use ESLint? … Yes # ESLint 사용 여부
✔ Would you like to use Tailwind CSS? … Yes # Tailwind CSS 사용 여부
✔ Would you like your code inside a `src/` directory? … No # src/ 디렉토리 사용 여부
✔ Would you like to use App Router? (recommended) … Yes # App Router 사용 여부
✔ Would you like to use Turbopack for next dev? … No # Turbopack 사용 여부
✔ Would you like to customize the import alias (@/* by default)? … No # `@/*` 외 경로 별칭 사용 여부- public 폴더를 만들어서 정적 자원 요소를 저장할 수 있다. 주로 font나 이미지 등을 저장할 수 있다.
개발 서버 실행
- npm run dev(yarn dev pnpm dev 등)
- http://localhost:3000신청서를 보려면 방문하세요 .
- 파일 을 편집 app/page.tsx 하고 저장하면 브라우저에서 업데이트된 결과를 볼 수 있습니다.
TypeScript 설정
typescript.json 를 활용하여 typescript에 대한 종속성을 설치하고 활용할 수 있다.
ESlint 설정
Eslint 가 내장되어 있기 때문에 설정을 통해서 커스텀이 가능하다.
npm run lint로 실행을 하면
stric mode
basic mode
이렇게 구성이 되어 씨고
Strict : Next.js의 기본 ESLint 구성과 더 엄격한 Core Web Vitals 규칙 세트를 포함합니다. 이것은 처음으로 ESLint를 설정하는 개발자에게 권장되는 구성입니다.
기본 : Next.js의 기본 ESLint 구성을 포함합니다.
취소 : ESLint 구성을 포함하지 않습니다. 사용자 정의 ESLint 구성을 설정하려는 경우에만 이 옵션을 선택하세요.
활용이 가능하다.
절대 가져오기 및 모듈 경로 별칭 설정
Nextjs 에는 "path"에 대한 기본지원이 있는 데 절대 경로 module에 대한 설정을 통해 경로 단축이 가능하다.
``
import {Button } from "../../../../components/button"
-> import {Button } from "@/components/button"
이런식으로 절대경로 단축이 가능하고 tsconfig.json에서
{
"compilerOptions": {
"baseUrl": "src/"
}
}
경로를 절대 경로로 구성할 수 있으며
{
"compilerOptions": {
"baseUrl": "src/",
"paths": {
"@/styles/": ["styles/"],
"@/components/": ["components/"]
}
}
}
``
모듈 경로 옵션을 활용하여 매핑 또한 가능하다.
프로젝트 구조 및 조직
Folder and file conventions
최상위 폴더 구조
왼쪽은 app router 기본인 부분이고 다른 src는 src directory를 사용하는 경우이다.
Top-level files
Next.js
next.config.js nextjs에 대한 구성파일
package.json 프로젝트에 대한 종속성 및 스크립트
instrumentation.ts 앱에 최적화에 대한 계측
middleware.ts nextjs에 middleware
.env 환경 변수
.env.local 환경 변수 local
.env.production 환경 변수 local production
.env.development 환경 변수 dev mode
.eslintrc.json eslint 설정
.gitignore git ignore
next-env.d.ts typescript 선언 파일
tsconfig.json TypeScript에 대한 설정 파일
jsconfig.json JavaScript에 대한 설정 파일
routing file
layout .js .jsx .tsx layout 부분 folder 마다 구성
page .js .jsx .tsx 페이지
loading .js .jsx .tsx UI 로딩 중
not-found .js .jsx .tsx UI를 찾을 수 없습니다
error .js .jsx .tsx 오류 UI
global-error .js .jsx .tsx 글로벌 오류 UI
route .js .ts API 엔드포인트
template .js .jsx .tsx 다시 렌더링된 레이아웃
default .js .jsx .tsx 병렬 경로 대체 페이지
Nested routes(중첩 라우팅)
folder : route 구분
folder/folder 중첩 라우팅
dynamic routes(동적 경로 라우팅)
[folder] : 동적 경로 segment(분절)
[...folder] : 포괄적인 경로 세그먼트
[[...folder]] : 선택 가능한 경로 구간
Route Groups and private folders
(folder) : 라우팅에 영향을 주지 않고 경로를 그룹화합니다.
_folder : 라우팅에서 폴더 및 모든 자식 세그먼트를 제외합니다.
