NextJS 란?

NextJS란?

React의 SSR(Server Side Rendering)을 쉽게 구현하게 하는 프레임워크.
리액트로 개발 시 SPA(Single Page Application)을 이용해 CSR(Client Side Rendering)을 해서 장단점이 있는데 검색엔진 최적화 부분의 단점이 있다. CSR을 하면 첫페이지에 빈 html을 가져와 JS를 해석해서 화면을 구성해서 검색엔진에 노출이 힘들다.

Next.js에서는 Pre Rendering을 통해 미리 렌더링해서 html을 가져와 사용자나 검색엔진 크롤러한테 바로 페이지를 전달한다.
리액트에서도 SSR을 지원하지만 구현이 복잡해서 Next.js를 사용해 해결한다.

설치

yarn create next-app

yarn create next-app --typescript ./

Nextjs 구조

pages

• 생성할 페이지들 생성하는 폴더
• index.tsx: "/" 페이지
• _app.tsx: 공통 레이아웃 작성, 모든 페이지에 공통으로 들어가는 요소를 넣는 페이지, url로 어떤 페이지에 들어가기전에 통과하는 페이지다.
• about.tsx: about페이지를 만들시 생성

public

• 이미지같은 정적인 에셋들 보관

styles

• style처리 폴더
• module css는 컴포넌트에 붙어 스타일링하는 것, 확장자앞에 module을 붙여야한다.

next.config.js

• Nextjs는 웹팩을 기본 번들러로 사용한다. 그 웹팩설정을 하는 파일이다.

------------------------------------------------------------------

Pre-rendering

ClientSide에서 자바스크립트 처리 전에 미리 페이지를 위한 HTML을 생성하는 방식으로, 검색엔진 최적화가 효율적으로 이루어진다.

크롬에서 Disable JavaScript

1. Command + Shift + P
2. javascript검색
3. Disable JavaScript 선택