뭔데 너는 또

the React Framework for Production

next.js 페이지를 들어가면 제일 먼저 보이는 문구이다. 프로덕션을 위한 리액트 프레임워크

리액트 - 사용자 인터페이스를 만들기 위한 javaScript 라이브러리

그러면 next.js는 프로덕션을 위한 javaScript 라이브러리 프레임워크..? 가된다.

프레임워크 vs 라이브러리

• 프레임워크는 기반구조 vs 라이브러리는 개발 편의 도구들
• 제어주도권을 프레임워크가 가짐 vs 제어 주도권 사용자가 가짐
• 프레임워크는 기계(포크레인) vs 라이브러리는 공구(몽키스패너)
• 프레임워크 자유도 상대적을 작음 vs 라이브러리 자유도 상대적으로 큼

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

왜 Next.js인가?

프론트엔드 개발자들이 가진 고민에 대한 적한 해결책을 제공

• 규모가 있는 서비스 구조 설계를 어떻게 할것인가?
• 개발환경 / 코드 분할 / 파일 기반 구조
• SEO (검색엔진 최적화)
• 프론트엔드에 필요한 간단한 API 구성
• 손쉬운 배포 시스템 Vercel

환경 설정

기본 설정 내용

Node 16.15.1
Yarn 1.22.19
Git 환경에 맞춰서 설치
VScode

Next.js 프로젝트 띄워보기

 npx create-next-app (만들고 싶은 프로젝트 이름) --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

이렇게 만들고 npm run dev해서 들어가보면

이렇게 간단한 next.js 페이지가 보인다.

Next.js 쇼케이스 둘러보기

https://nextjs.org/showcase 여기로 들어가면 next.js로 만든 여러개의 사이트를 구경할수 있는데, wappalyzer 를 사용하면 쇼케이스 페이지가 어떤 기술 스택을 사용해서 만들어졌는지 알수 있다.(와우)

예를 들어서 해당 링크의 페이지가 어떤 기술스택을 썼는지 보고싶으면

설치한 wappalyzer를 클릭해서 열람할 수 있다.
이 페이지 같은 경우는 웹 서버 구현으로 next.js를 사용했고, 프로그래밍 언어로 Node.js, 프레임워크로 React, 등등 여러가지 기술 스택을 열람할수 있다.