Next.js

요즘 많이 사용한다는 Next.js를 공부해보기로 했다.🙂React와 같은 SPA는 검색엔진최적화에서 문제가 발생한다고 알고 있는데, React에 이 Next.js를 함께 사용해주면 SSR을 쉽게 구현해줄 수 있다고 한다.그동안은 React나 Angular같은 웹프레

react-router-dom 없이 폴더 구조로부터 Next.js가 프로젝트의 route를 도출해내도록 해줌"pages"라는 폴더를 생성하고, 그 안에 js파일들을 생성하면 자동으로 라우팅됨동적라우팅은 폴더나 파일명에 \[]를 사용예시로 이처럼 폴더 구조가 이루어져 있

Link 컴포넌트

pre-rendering Next.js는 페이지와 필요할 법한 모든 데이터가 있는 HTML 콘텐츠를 사전에 렌더링 ➡️ SEO관점에서 👍 오직 최초 로딩할 때 로딩되는 첫 번째 페이지만 사전 렌더링됨 첫 번째 렌더링이 끝나고 나면 다시 react가 프론트엔드의 모든

ISR (증분 정적 생성) getStaticProps 함수는 build 스크립트로 프로젝트를 빌드할 때 실행됨➡️데이터가 자주 변경될 경우에는 또 다시 build를 하고 배포해야 하는 문제 발생 ISR(Incremental Static Regeneration)을 사용하

페이지 요청이 서버에 도달할 때마다 실행되는 함수, 서버에서만 실행됨서버에 도달할 때 요청을 처리하기 때문에, 사전 생성할 필요 X, 동적 경로를 미리 지정할 필요 X서버에서 데이터를 패치하여 초기 데이터를 전달하도록 구성되어 있음res와 req 객체를 사용해서 요청을

데이터를 가져오기 위한 React HooksSWR은 먼저 캐시(stale)로부터 데이터를 반환한 후, fetch 요청(revalidate)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략동일한 SWR 키를 사용한다면 요청은 중복 제거, 캐시, 공유되므로 단 한번의

Next.js 13에서 추가된 내용들에 대해 정리해보려고 한다.👻Next.js 13에서는 앱 라우터는 app이라는 새 디렉터리에서 작동한다.기존에는 페이지 라우팅을 pages 디렉터리로 처리했었어서, 이 점이 가장 큰 변경점으로 다가왔다.layout은 여러 페이지들에

Nextjs 13을 알아보자 !