개인 노트 정리) Next.js - Next.js 소개 - Next.js 소개 및 도구 - 환경 설정

Next.js 완전 정복 : 확장성 높은 커머스 서비스 구축하기
Ch 02. Next.js 소개

Next.js 소개 및 도구 - 환경 설정

# Next.js 란?

## 프레임워크 vs 라이브러리

- 프레임워크는 기반구조 vs 라이브러리는 개발 편의 도구들
- 제어 주도권 프레임워크가 가짐 vs 제어 주도권 사용자가 가짐
- 프레임워크는 기계 (like 굴삭기 ) vs 라이브러리는 공구(like 펜치니퍼)
- 프레임워크 자유도 상대적으로 작음 vs 라이브러리 자유도 상대적으로 큼

 

## 프레임워크의 장점

- 개인이 해야할 고민들을 프레임워크 개발자가 미리 하고 반영
- 특정 디자인 패턴이나 동작과 기능들을 위한 정의와 방식을 정리해 둠
- 여러 개발자가 함께 협업할 때 기준점이 됨

 

## Why Next.js

프론트엔드 개발자들이 가진 고민에 대한 적절한 해결책을 제공
- 규모가 있는 서비스 구조 설계를 어떻게 할 것인가
- 개발환경 / 코드 분할 / 파일 기반 구조
- SEO(검색 엔진 최적화)
- 프론트엔드에 필요한 간단한 API 구성
- 손쉬운 배포 시스템 Vercel

 

## Next.js의 대체재는 없나

- Next.js는 대표적인 React 프레임워크로서 자리를 공고히 하고 있음
- Vercel의 비전 We enable developers to build and publish wonderful things
- https://vercel.com/about
- 대체재로는 Gatsby / Remix 등이 있음

 

# 환경 설정

## Next.js 프로젝트 띄워보기 (cmd 창에서)

1. cmd 창에 입력

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

 

2. 설치후 설치된 폴더로 이동하여 프로젝트 실행

cd nextjs-blog/

npm run dev

 

3. localhost:3000 으로 웹페이지 확인

 

## VSCode에서 yarn으로 패키지들 설치

1. cmd 창에서 yarn 입력

2. cmd 창에서 yarn dev 입력

 

# 정리