Next.js 란?
Next.js는 React 라이브러리의 프레임워크이다
자바스크립트를 사용하다가 React를 접했을 때도 신세계였는데 뭐가 더 좋아서 사용하는걸까🤔?
검색하다보니 대부분의 사람들이
Search Engine Optimization(SEO)(검색엔진최적화)를 위한
Server-Side Rendering(SSR)을 가능하게 하기 때문이라고 한다
React는 CSR을 통해 비어있는 HTML을 먼저 나타내고 그 위에 script를 로딩하기 때문에
시간도 오래걸리고 SEO 효과가 낮다
반면, Next.js는 Pre Rendering을 통해 미리 렌더링된 페이지를 가져올 수 있게 해준다
사용자에게 더 좋은 환경을 제공하고 검색 엔진에 잘 노출 될 수 있도록 해주는 SEO에서도 장점을 얻을 수 있다.
정리해보자면
React에서는 CSR을 사용하기 때문에 시간이 길어지고 SEO에 취약
이러한 점을 보완할 수 있는 것이 Next.js
Next.js를 통해 SSR이 가능해지며 SEO에서도 장점을 가진다
이 내용은 아래에서 조금 더 풀어서 작성해보겠다
라이브러리 vs 프레임워크
헷갈리는 개념을 잡고가자...!
라이브러리와 프레임워크의 주요 차이점은 Inversion of Control (통제의 역전) 이다
라이브러리
사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내릴 수 있다
메서드를 호출하면 사용자가 제어할 수 있다
ex) React.js
프레임워크
파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따라야 한다
제어가 역전되어 프레임워크가 사용자를 호출한다
ex) Next.js
[노마드코더] 라이브러리? 프레임워크? 차이점 아직도 모름? 5분 순삭
시작하기
$ npx create-next-app@latest
- 프로젝트 이름 설정
src>pages폴더 내 파일 삭제후index.js생성
npm run dev로 실행
Next.js의 특징
1. pages 폴더 내부에 있는 파일의 이름이 url이 된다
기본 페이지는 index.js에서 시작한다
url변경 예시
amazing.js 생성
기존 주소 뒤에 파일 이름인 amazing을 붙이면!?
파일 내부에 존재하는 함수의 이름은 크게 중요하지 않지만
default 상태로 export 되는 것이 필수이므로 export default를 꼭 작성해줘야 한다
2. 404 페이지가 기본적으로 탑재되어 있다
3. jsx
jsx를 사용하고 있다면 react를 import할 필요가 없다
하지만 useState나 useEffect 같은 리액트 메서드를 사용하려면 react를 import 해야한다
Pre Rendering
pre-render는 사전에 HTML 파일을 만든다는 의미이다
컴포넌트의 초기상태를 기반으로 미리 렌더링된 HTML을 클라이언트로 넘기기 때문에
페이지의 초기 로딩 지연을 줄일 수 있다
Next.js는 Pre Rendering으로 페이지가 미리 렌더링 된다는 장점을 가지고 있다
Next.js는 실제 HTML이 존재하기 때문에
연결이 느리거나 자바스크립트가 완전히 비활성화 되어 있어도 유저는 HTML을 볼 수 있다
(기능은 연결이 안되어있더라도 페이지가 미리 생성되기 때문에 초기화면은 무조건 나타난다)
반면 React.js는 Client-Side Rending(CSR)이다
① 비어있는 <div>가 들어있는 HTML을 먼저 가져오고
② 그 후에 자바스크립트나 다른 소스코드를 요청하고
③ 브라우저가 소스코드들을 실행시켜야만
④ 유저에게 보이는 UI가 만들어지는 것이다
즉, 자바스크립트나 다른 소스코드가 들어와야만 화면을 나타낼 수 있다는 것!!
