[Nextjs] 설치

npx create-next-app nextjs-blog --use-npm --example ..,

 

 

 

yarn create next-app blog --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

 

 

 

 

next/Link와a 의 차이점

next/Link는 Client Side Navigate로 동작함.

*Client Side Navigate는 browser에서 url을 직접 쳐서 이동하는 것과 달리, js상에서 page 컴포넌트를 교체함.

a태그는 페이지 자체를 다시 리로드함. 페이지가 새로고침됨.

 

그니까,

next/link는 링크로 이동할 페이지에 대해서, prefetch를 하거나, client-side-rendering을 해주기 위해서 사용하고,

a 태그는. 서비스 이외의 페이지에 접근할 때, 사용하면 된다.

 

Code Splitting

Nextjs는 Automatic Code Splitting을 제공 -> 성능 최적화

- 특정 페이지에 접근할 때, 해당 페이지를 그릴때 필요한 chunk만 로드

- 페이지 이동을 할 땐 목적지 페이지에 필요한 chunk만 추가 로드

 

 

Prefetching

<Link> 컴포넌트를 사용하면, viewport에 <Link> 컴포넌트가 노출되었을 때 href로 연결된 페이지의 chunk를 로드한다.

예시로, 첫번째 <Link>가 viewport에 노출되면, chunck파일을 가져온다. viewport를 내려서

 

 

 

next/Image

장점: 일반 img 태그를 사용하는 것보다, 적은 용량으로 이미지를 서버로부터 브라우저가 받을 수 있다.(webp형태)

장점2: viewport에 들어왔을 때, 서버로부터 받아온다. 레이지로딩을 자동으로 해준다.

장점3: viewport에 따라서, 사이즈를 자동으로 맞춰서 보내준다.

 

 

next/head

 

 

pages/_app.js 역할

https://nextjs.org/docs/advanced-features/custom-app

- 에러처리를 커스텀할 수 있다. -> componentDidCatch 사용해서

- 페이지들에 추가적인 데이터를 주입할 수 있다.

- 페이지를 렌더링할 때, 상태를 유지할 수 있다.

- global Css 를 추가할 수 있다.

- 페이지들간에 변화 사이에서 레이아웃을 지속할 수 있다. persisting

 

 

Layout

- Layout 컴포넌트는 페이지를 전환할 때, 재사용되고, 컴포넌트의 상태는 보존(preserved)될거다(e.g input values).

 

 

Next.js 모듈 css 임포트 가능

- 자바스크립트 파일에 css file을 임포트할 수 있다. -> nextjs는 javascript를 넘어서는 import 컨셉을 확장하기 때문이다.

 

 

 

Prerendering

 

Data fetching

 

 

SSG(build time)

SSG 적용 여부 선택 기준

- 사용자가 페이지를 요청하기 전에 pre-render할 수 있는가? -> yes: ssg, no: ssr or csr or isr

 

쓰면 좋은 페이지

- 마케팅 페이지

- 블로그 포스팅

- 이커머스 제품 리스트

- 도움 및 문서

 

ssg의 데이터 패치 두 가지 케이스

- 외부 데이터(다른 파일, api, db) 없이 pre-rendering

- 외부 데이터를 가져와서 pre-rendering

 

 

 

 

 

SSR(request time)