리액트는 꾸준히 사랑받는 프론트엔드 프레임워크 중 하나입니다.
2023년 3월, 리액트에서 다큐먼트를 개편해 새로운 사이트를 배포 했습니다.
예전 사이트는 더 이상 업데이트가 되지 않으며 리액트를 시작하는 권장 방법조차 Create React App, CRA,에서 바뀌었습니다.
오늘은 리액트에서 새로 권장하는 리액트 프로젝트를 시작하는 방법 중 첫 번째, Next.js를 이용하는 방법에 대해서 알아보겠습니다.
Next.js
Next.js, 넥스트 js는 Vercel이라는 기업에서 개발한 리액트 프레임워크 중 하나입니다. 서버 사이드 랜더링(SSR)을 랜더링 기법의 디폴트 값으로 가져가지만 정적 사이트 개발(Static-Site Generation, SSG)이나 클라이언트 사이트 랜더링(CSR)도 가능합니다. 더 자세한 사항은 넥스트 js의 웹사이트에서 확인해 주세요.
필요조건
- Node.js 18.17이나 그 이후 버전
- 윈도우, macOS, Linux 모두 사용 가능
- 터미널을 이용해야합니다
Next.js 어플리케이션 생성
Next.js 는 create-next-app 사용을 권장합니다.
npx create-next-app@latest
@latest는 항상 최신 버전의 Next.js를 사용할 수 있도록 해줍니다.
y를 타이핑해준 뒤 엔터를 눌러줍니다.
Need to install the following packages:
create-next-app@14.0.1
Ok to proceed? (y)
프로젝트에 관련된 기본 질문을 합니다. 해당 질문에 맞게 답을 적어준 뒤 진행해 줍니다.
✔ What is your project named? … nextjs-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 is your project named? ...
프로젝트 이름을 적어줍니다 - Would you like to use TypeScript? ...
타입스크립트 사용을 원하시면 Yes를, 아니면 No를 선택합니다 - Would you like to use ESLint? ...
ESLint 사용을 원하시면 Yes를, 아니면 No를 선택합니다 - Would you like to use Tailwind CSS? ...
Tailwind CSS 사용을 원하시면 Yes를, 아니면 No를 선택합니다 - Would you like to use 'src/' directory? ...
상위 폴더에 src 폴더 사용을 원하시면 Yes를, 아니면 No를 선택합니다 - Would you like to use App Router? (recommended) ...
App Router는 Next.js의 13 버전에서 새로 소개된 기능입니다. 사용을 원하시면 Yes를, 아니면 No를 선택합니다 - Would you like to customize the default import alias (@/*)? ...
Default import alias는 컴포넌트를 불러올 시 상대경로 대신 사용 되는 방법입니다. src 폴더 하위 폴더들을 @ 을 이용해 쉽게 접근 가능합니다.
import { CustomComponent } from '../../components/customComponent';상대경로를 사용하는 대신
import { CustomComponent } from '@/components/customComponent'; @ 을 이용해 접근 가능합니다.
사용을 원하시면 Yes를, 아니면 No를 선택합니다
모든 질문에 답을 끝냈으면 설치가 완료된 후 리액트 프로젝트를 시작하실 수 있습니다.
cd nextjs-app
Next.js가 처음이시라면 Next.js 튜토리얼을 추천드립니다.