Next.js
1.[Next.js] 0. 리액트에서 Next.js로
Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 서버 사이드 렌더링과 같은 다양하고 풍부한 기능을 제공한다. 그렇다면 우리는 왜 Next.js를 공부해야하고, 이를 사용했을 때 어떤 이점이 있는 것일까?
2023년 3월 18일
2.[Next.js] 1. Next.js의 기본
Next.js 프로젝트를 생성하는 방법 부터 기본적인 기능들의 사용법 까지
2023년 3월 18일
3.[Next.js] 이미지가 포함된 모달 띄우기
Next.js Image를 사용하면 처음 이미지를 불러오는 코드를 작성할 때부터 이미지의 크기를 지정해주어야 한다.따라서 화면 크기에 따라 이미지의 사이즈를 동적으로 바꿀 수 없다는 문제가 발생한다.
2023년 8월 25일
4.[Next.js] API Routes 공식 문서 정독
기본적으로 pages/api 폴더 안에서 바로 api를 구현할 수 있는 기능을 제공하고 있음.
2023년 8월 25일
5.[Next.js] Dynamic Routing과 Data Fetching
원래 알고있던 정보로는 함수 내부에서 const { id } = router.query; 이런 식으로 작성했을 때 이 페이지의 path에서 id값만 따올 수 있는걸로 알고있었는데 data fetching하는 과정에 있어서 저 데이터를 사용하기가 쉽지 않음.
2023년 8월 25일
6.[Next.js] getStaticPath 사용
이번 페이지는 어제 발견했던 getStaticPath에 대한 내용을 다룰 것임.
2023년 8월 25일
7.[Next.js] getStaticPaths 함수 내부에서 Data Fetching
getStaticPaths는 기본적으로 paths: \[], fallback: “” 형식의 데이터를 e나같은 경우는 모든 session data에 해당하는 id값을 불러오고 그 id 데이터를 paths에 넣어서 return하는 방식을 사용해야했다.
2023년 8월 25일