Next.js
: React를 기반으로 만들어진 프레임워크
- React 코드를 기반으로 하며, React를 개발하는 데 사용됨
- React의 기능 + 추가적인 기능 (서버 사이드 렌더링, 정적 생성, 라우팅 등)의 기능 제공
일반적으로 Next.js는 다음과 같은 파일 구조를 가짐
.
├── README.md
├── package-lock.json
├── package.json
├── public
├── src
├── pages
├── styles
├── node_modules
├── components
└── ./next
Next.js 프로젝트 생성 및 실행
npx create-next-app "[프로젝트명]"
// 타입스크립트 버전
$npx create-next-app --typescript
// 실행하는 법
npm run dev || yarn devNext.js의 장점
- 프론트엔드에 필요한 간단한 API 구성이 가능
- Server-Side Rendering 기능 제공
- Vercel를 사용한 손쉬운 배포 시스템 제공
Data Fetching 방법
Next에서 제시하는 데이터를 패칭하는 방법에는 아래와 같은 방법들이 있다.
(1) Server-Side Rendering (SSR)
: 서버가 데이터를 가져와서 화면을 그려주는 것
-
getServerSideprops 라는 함수를 사용해서 서버쪽에서 데이터를 그려주게 사용하면 됨
-
프론트에서 해당 함수를 내보내면 Next.js는 getServerSideProps가 반환한 데이터를 사용하여 각 요청마다 이 페이지를 사전 렌더링!
-
getServerSideprops는 서버 측에서만 실행되며, 브라우저에서는 실행되지 XX
-
SSR을 사용하면 터미널에 server라는 메세지가 찍히는 것을 확인 할 수 있음
(2) Client-Side Rendering (CSR)
: 클라이언트가 데이터를 가져와서 그려주는 것
- 기존 리엑트 사용법과 동일함
- 브라우저에서 그려주기 때문에, 웹브라우저에 있는 콘솔에서 Client라는 메세지를 확인할 수 있음
Next.js에서 alias 설정하기
alias : 모듈을 Import 할때, 특정 경로를 다른 경로로 매핑하는 기능을 의미
-모듈을 더 쉽게 참조하고 관리할 수 있게 도와줌
- 주로 긴 상대 경로나 절대 경로를 짧고 간결한 별칭인 (alias)로 대체해서 사용
alias 설정하기 (paths)
- paths 옵션을 통해서 설정이 가능!
// tsconfig.json or jsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
},
}위에 있는 코드는 alias 를 사용한 것이라고 할 수 있음.
위 코드의 의미는 @로 시작하는 경로를 통해, ./src/를 대체할 수 있는 것.
예를 들면 다음과 같다.
//상대경로를 사용하여서 import 하기
import Hi from '@/components/Hi';
//alias를 사용한 절대경로를 통해서 import 하기
import Hi from './src/components/Hi';
// 위에 있는 2개의 import문은 동일한 것을 의미함React와 다르게 Next.js가 가지는 차이점
- 페이지 기반의 라우팅 구조
- Next.js는 pages 디렉토리 안에 파일 기반의 라우팅을 제공
- 각 파일은 해당되는 URL 경로에 매핑되며, 파일 이름이 경로와 직접적으로 연결됨
- cf) React는 일반적으로 별도의 라우팅 라이브러리를 사용하여 라우팅을 구현
- CSS 지원
- Next.js는 기본적으로 CSS 모듈, SASS, CSS-inJS 등의 스타일링 옵션을 제공하며, 기본적으로 CSS와 Sass를 지원
