Next.js는 리액트(React)를 기반으로 한 풀스택 프레임워크로 최근 웹 서비스 구축에서 많이 사용되는 도구 중 하나입니다. 이번장에선 웹 서비스 구현을 위한 Next.js 설정 및 yarn 설정방법까지 함께 알아보겠습니다.
💻 스터디 참고자료
수강중 강의 : 패스트캠퍼스 AI시대 웹 개발 바이블: Next.js로 구축하고 AI로 완성하는 웹 서비스
질의 응답 : ⭐️ Gemini 선생님 ⭐️(기본 설치 방법, 에러 발생시 하나씩 물어보며 진행)
🏷️ AI개발 스터디 글 목록
1) [AI개발 스터디 01] Product Designer의 커서 스터디 : 우당탕 AI 개발구조 이해
2)[AI개발 스터디 02] Cursor와 Next.js 개발 환경 설치하기 (1) – Github 가입 및 준비
3) [AI개발 스터디 03] Cursor와 Next.js 개발 환경 설치하기 (2) – cursor 터미널 세팅 (개인적인 공부 – 필수 아님!)
4) [AI개발 스터디 04] Cursor와 Next.js 개발 환경 설치하기 (4) – Next.js 설정 및 Yarn 설치
글 구성
Next.js 설정하기
1) Next.js 특징
Next.js는 리액트(React)를 기반으로 하는 풀스택 프레임워크입니다. 순수 리액트가 UI 라이브러리에 그친다면, Next.js는 웹 서비스 운영에 필요한 백엔드 기능과 최적화 도구를 통합하여 제공합니다.
Next.js의 특징은 다음과 같습니다.
1) 렌더링 방식의 유연성 (SSR, SSG, ISR)
리액트는 클라이언트 사이즈 렌더링(CSR) 방식을 사용 합니다. 브라우저에서 자바스크립트가 실행될 때까지 화면이 비어있을 수 있는 단점이 있습니다. Next.js는 다음 방식을 지원해 이를 해결 합니다.
- SSR (Server-Side Rendering) : 요청 할 때 마다 서버에서 페이지를 생성해 전달
- SSG (Static Site Generation) : 빌드 시점에 페이지를 미리 생성해 성능을 극대화
- ISR (Incremental Static Regeneration) : 전체 빌드 없이 특정 페이지를 주기적으로 업데이트
2)검색 엔진 최적화 (SEO) 향상
검색엔진 크롤러는 완성된 HTML 문서를 분석 합니다. 서버에서 HTML을 미리 생성하는 Next.js는 크롤러가 컨텐츠를 즉시 읽게 해 검색 결과 상단 노출에 유리 합니다.
3)파일 시스템 기반 라우팅
별도 라우터 설정 코드 없이 ‘app’ 디렉토리 내 폴더 구조가 그대로 웹사이트 주소 (URL)이 됩니다. 프로젝트 규모가 커져도 경로 관리를 직관적으로 할 수 있습니다.
4) 성능 최적화 도구 내장
이미지, 폰트, 스크립트 최적화 기능이 프레임워크에 내정되어 있어 이미지 용량 최적화, Lazy Loading 등을 자동으로 처리해 웹 성능 점수를 높여줍니다.
5)풀스택 개발 지원 (API Routes)
별도 백엔드 서버 없이도 api 디렉토리를 통해 서버 로직(데이터베이스 조회, 인증 등)을 작성할 수 있습니다. 프론트엔드와 백엔드를 하나의 프로젝트에서 효율적으로 관리 할 수 있습니다.
2) Next.js 설치
Next.js 프로젝트를 시작하기 위해서 운영체제 (Window 또는 Mac)에 Node.js LTS 버전 설치가 선행되야 합니다.
아래 설치 정보는 별도 터미널 없이 Cursor를 통해서도 환경설정이 가능합니다.
[Mac OS 에서 설치]
1) Homebrew 설치: 터미널을 열고 아래 코드를 실행합니다.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"2) Node.js 설치: 터미널에 아래를 입력해 Node.js를 설치합니다.
brew install node3)설치 확인: 아래 명령어로 버전 숫자가 나오는지 확인합니다.
node -vYarn 설정하기
Yarn(공식 사이트)은 ‘프로젝트 라이브러리를 관리해 주는 툴‘ 입니다. 개발할 때 모든 기능을 직접 만들지 않고 다른 개발자가 만든 코드(패키지)를 가져다 쓰게 되는데 복잡한 설치와 관리를 대신 처리해 주는 도구 입니다.
Yarn을 사용하는 이유
- 속도 : 여러 패키지를 동시에 설치하는 기술을 사용해 개발 환경 설정시 기다리는 시간을 줄여줌
- 버전 관리 : ‘Lock 파일’ 기능으로 내 컴퓨터와 동료 컴퓨터에서 100% 동일한 버전의 부품이 설치되도록 보장 해줌.
- 편의성 : 명령어가 직관적이고, 오류 메시지도 이해하기 쉬운 구조라 많은 기업과 실무에서 선호함.
기존 next.js로도 개발이 가능하지만, yarn을 활용해 더 효율적으로 사용 할 수 있습니다.
예시
프로젝트에 react 18버전을 사용해야 할 경우, ‘yarn add react’ 라고만 작성하면 됩니다. 그렇게 되면 package.json 폴더에 필요한 정보가 남겨집니다.
Yarn 설정 방법
Cursor의 터미널 영역에 아래와 같은 명령어를 작성 합니다.
npm install -g yarn잘 설치가 됐는지 확인하려면 아래 코드를 입력 합니다
yarn -v버전 정보가 입력되면 잘 설치 된 것입니다.
