Next.js

1. Patterns layout : layout component를 생성하고 생성한 component를 상위 컴포넌트로 적용할 컴포넌트들을 감싸주면 된다. _app.js 파일이 지나치게 커지는 것을 막기 위하여 쓴다. Layout 컴포넌트를 만들어주고, App 컴포넌트에서 이를 사용한다. Head 컴포넌트 리액트에서 react-helmet으로 구현했던 것들을 Next.js에서는 간단히 Head 컴포넌트로 구현 가능하다. 2. Fetching Data public 폴더에 있는 파일들은 쉽게 import할 수 있다. Image next.js에서는 이미지 최적화를 위해 img 태그 대신 Image 태그를 사용한다. import Image from "next/image"; ... ... 3. Redirect ..

1. Pages react 컴포넌트를 export하는 파일들을 pages폴더 안에 넣어주면, 파일 이름으로 url을 만들어 자동으로 라우팅 해준다. 안의 function이름은 파일이름과 달라도 된다. 특징 파일 이름이 url이 된다. export default function ~ 형태로 컴포넌트 작성해야함. url에 pages폴더에 없는 파일이 보여줘도 자동으로 404페이지를 보여준다. 2. Routing 보통 페이지간 이동은 a 태그를 사용하지만, next.js에서는 사용하지 않는다. a 태그를 사용하면 처음 페이지 진입시 번들파일을 받고, a태그에 의해 라우팅 되면서 다시 번들파일을 받기 때문이다. 그래서 next에서 페이지간 이동에는 모두 Link 태그를 사용한다. 3. CSS Modules imp..

hydrate : SSR을 하면서 나오는 개념이다. SSR의 경우 pre-rendering를 통해 완성된 HTML을 클라이언트에게 전달한다. 서버에서 렌더링된 정적 페이지를 클라이언트에게 보낸다. react는 번들링된 JavaScript 코드를 클라이언트에게 보낸다. 클라이언트는 전달받은 HTML과 JS코드를 매칭하는 Hydrate를 수행한다. Hydrate란 전송받은 JavaScript들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링하게 되면서 각각 자기 자리를 찾아가며 매칭된다. → Next.js 프로젝트에서 개발한 리액트 컴포넌트를 프론트 엔드에서 실행하는 것을 하이드레이션(Hydration)이라 부른다. Next.js는 코드를 이미 HTML로 렌더링한 상태에서 만약 리액트 컴포넌트와..

Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링(SSR)과 같은 다양하고 풍부한 기능을 제공합니다. Next.js는 많이 말하는 것처럼 SSR을 하기 위해 사용한다고 한다. CSR과 SSR의 개념을 알아보자. CSR과 SSR의 개념 1) 클라이언트 사이드 랜더링(CSR) : 클라이언트인 브라우저가 랜더링을 처리하는 방식이다. 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 화면을 그리는 주체가 된다. 2) 서버 사이드 렌더링(SSR) : 브라우저가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식이다. 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면을 만들어 제공한다. 서버가 화면을 그리는 주체가 된다. SSR의 장점 클..