Skip to main content

Next.js란?

넥스트(Next.js)란 리액트로 웹 애플리케이션을 편하게 개발할 수 있도록 도와주는 프레임워크입니다. 초기에는 주로 서버 사이드 렌더링(Server Side Rendering) 프레임워크의 역할을 했지만 요즘에는 리액트로 프로젝트를 시작할 때 권장되는 All in one 프레임워크입니다.

Next.js의 주요 특징​

넥스트는 CRA(Create React App)이나 Create Vite로 생성한 프로젝트에 비해 더 많은 편의 기능을 제공합니다.

  • 라우팅 : 리액트 라우터(React Router)를 별도로 구성하지 않아도 되는 파일 기반 라우팅 시스템을 제공합니다. 이 시스템은 서버 컴포넌트 뿐만 아니라 레이아웃, 에러 처리, 로딩 상태 관리 등을 편하게 제어할 수 있습니다.
  • 렌더링 : 클라이언트 사이드 렌더링(Client Side Rendering) 뿐만 아니라 서버 사이드 렌더링(Server Side Rendering)도 지원합니다.
  • 데이터 호출 : 브라우저 웹 API인 fetch를 확장해서 제공할 뿐만 아니라 데이터 캐싱, 데이터 유효성 확인 등의 기능을 제공합니다.
  • 스타일링 : 프로젝트 생성시 자주 사용되는 CSS 모듈 방식, CSS in JS 방식, Tailwind를 바로 구성해서 간편하게 사용할 수 있습니다.
  • 성능 최적화 : 웹 성능 최적화를 위해 이미지, 폰트, 스크립트 등의 리소스를 최적화 해줍니다.
  • 타입스크립트 : 이전 넥스트 버전보다 타입스크립트 지원이 강화되었습니다.
tip

라우팅(Routing)이란 페이지를 이동하는 동작을 의미합니다.

Next.js 프로젝트 생성​

아래 명령어로 넥스트 프로젝트를 생성합니다.

npx create-next-app@latest

명령어를 입력하면 다음과 같이 프로젝트 세부 사항을 결정할 수 있습니다.

✔ What is your project named? … learn-next
✔ 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
tip

설치 명령어를 입력하기 위해서는 Node.js 최신 LTS 버전이 설치되어 있어야 합니다.