api 연동하기lib라는 폴더를 생성한 후 axios.js 파일을 생성한 뒤, axios instance를 생성해준다.다음과 같이 api를 요청하고 불러올 수 있다.
리다이렉트Redirects - Next.js다음과 같이 source와 destination 주소를 지정해줌으로 리다이렉트를 할 수 있다.
개발자 도구의 네트워크 탭에서 preserve를 체크하면 리스폰스를 확인할 수 있다.
틀린 주소로 접속 시 맞는 주소로 바꿔주는 기능.
커스텀 404 페이지
pages 폴더에 404.js 파일을 만들면 커스텀 404 페이지를 만들 수 있다.
커스텀 app과 documentdocument 컴포넌트에서는 html 태그의 lang속성이나 html 태그를 추가할 수 있다.
React에서 사용하는 기능은 사용할 수 없다.
공통된 컴포넌트는 app컴포넌트에 구현하면 된다.
Context 활용하기위 useEffect를 추가함으로 document 컴포넌트에 class를 react 코드없이 적용할 수 있다.마지막으로 이를 export하여 useTheme()라는 Hook으로 themeContext의 값을 받아올 수 있다.불러오기다음과 같이 쉽게 불러올 수 있다.
(context의 적용은 app.js에서 전역적으로 하면 된다.)
lib에 ThemeContext.js에서 Context를 정의해주었다.
Context 정의하기
API 라우팅 (선택)Next.js에서는 페이지를 만드는 것처럼 간단하게 백엔드 API를 만들 수 있다.
Image 컴포넌트 소개next.js에서는 최적화된 이미지 태그를 지원한다.레이지 로딩이 적용되어 필요한 순간에만 이미지를 불러온다.
이미지를 불러오면 최적화된 사이즈로 확인할 수 있고,
import Image from 'next/image'
Image 컴포넌트 사용법Image 태그는 반드시 width랑 height를 지정해줘야한다.다른 방법으로는 fill 속성을 사용하여 상위 컴포넌트에 가득 채우는 방식이있다.이는 css에서 objectFit : cover을 사용해서 방지할 수 있다.
외부 이미지의 hostname과 pathname을 지정해줌으로 사용할 수 있다.
next.js에서는 외부 이미지를 사용할 경우 미리 next.config.js 에서 처리를 해주어야 한다.
외부 이미지 사용법
fill 속성을 사용하면 이미지의 모양이 망가질 수 있다.
Head 컴포넌트
icon을 public 폴더에 넣고 다음과 같이 하면 아이콘을 설정할 수 있다.
js파일에서 Head 태그를 사용하면 title을 설정할 수 있다.
구글 폰트 적용하기app.js 에서 Noto*_*Sans 폰트를 적용하는 방법은 다음과 같다.subsets는 사용할 언어를 지정해준다. (영문만 사용하는 폰트라면 ['latin'])아니면 Next.js에서 제공하는 Head 컴포넌트를 활용해서 전역 스타일로 적용할 수도 있다.
폰트를 적용하고 개발자 도구를 열어서 Network 탭의 세부 탭인 Font 탭을 살펴보면 구글 사이트가 아니라, 우리 사이트에서 폰트 파일을 받아 온다. 이는 초기 로딩 속도를 빠르게 최적화한다.
<Head> <style>{` html { font-family: ${notoSansKR.style.fontFamily}, sans-serif; } `}</style> </Head>
프리렌더링이란?즉 HTML 코드를 받아오기 전에 렌더링을 하는 것이다.빈화면이 보였다가 렌더링이 진행된다.)빌드과정에서 HTML을 생성한다.서버사이드 렌더링이점.검색 엔진이 최적화 된다. (빈 HTML이 아니기 때문)
초기 로딩이 빨라진다.
웹브라우저가 get요청을 보낼 때마다 HTML을 생성해서 보내준다.
이후 웹브라우저에서 Pre-Rendering된 HTML과 리액트를 연결한다. (Hydration)
정적생성
(React는 초기 빈 HTML을 보낸 뒤 JS를 통해 페이지를 렌더링하기 때문에
웹페이지 로딩 이전에 렌더링을 진행하는 것.
정적 생성 1
정적 생성을 하는 시점에서 받은 데이터를 초기데이터로 보내주는 방식으로 자주 바뀌는 데이터에는 적절하지 않은 방법이다.
이를 컴포넌트에 Props로 내려주는 식이다.
위 함수에서는 리액트 Hook을 사용할 수 없다.
위와 같이 getStaticProps라는 함수를 export하면 정적생성 시 next.js가 함수를 실행시킨다.
next.js 에서는 빌드를 하면 자동으로 정적생성을 실행한다.
정적 생성 2다이나믹 페이지 경로에서의 정적생성은 다음과 같이 context로 진행한다.또 다이나믹한 경로의 경우 어떤 path로 정적생성을 진행할지 위와 같이 지정을 해주어야 한다.true로 해두면 접근시 api요청을 보내 값을 받아온다.
모든 path를 하드코딩해서 적어두는 방식보다 위와 같이 효율적으로 구현이 가능하다.
(존재하지 않는 경로에 대한 처리는 try catch문으로 진행하면 된다.)
fallback 값을 false로 해두면 정적생성된 이외의 경로에 접근시 따로 처리하지 않는다는 뜻이다.
서버사이드 렌더링쿼리스트링의 값은 정적생성시 알 수 없다.q값은 products와 같이 Props로 페이지에 내려준다.자주 변하는 값이 있는 경우 서버 사이드 렌더링을 사용하는 것이 적절하다.
서버사이드렌더링과 정적생성은 동시에 사용할 수 없다.
따라서 다음과 같이 getServerSideProps라는 함수를 사용한다.
클라이언트에서 데이터 주고 받기입력폼을 만들어 서버와 데이터를 주고 받는 시나리오에선 프리렌더링으로 불러온 값을 초기값으로 state에 저장해서 사용한다.입력폼을 submit한 이후 response를 sizeReviews에 넣어주면 제출과 즉시 반영이 가능해진다.setReviews를 사용할 때는 콜백함수로 사용해야한다.
sizeReviews라는 값을 intitialSizeReviews라는 값으로 가져와서 state에 초깃값으로 넣어준다.
렌더링 과정 살펴보기
프리렌더링 HTML을 받아옴
필요한 json만 받아옴
따라서 새로고침보다 Link로 이동할 경우 json만 받아오기 때문에 훨씬 빠르다.
next.js에서는 최적화가 잘 되어있어서 그때그때 필요한 데이터만 불러와서 렌더링을 진행한다.
정적생성 vs SSR
항상 최신 데이터를 보여 줘야 하는 경우
데이터가 자주 바뀌는 경우
리퀘스트의 데이터를 사용해야 하는 경우 (예: 헤더, 쿼리스트링, 쿠키 등)
그 외에 특별한 이유가 없다면 되도록 정적 생성을 하는 걸 권장한다.
App Router 소개Next.js 13.4 이후 버전부터는 App Router라는 새로운 라우팅을 지원한다.서버에서만 렌더링되는 컴포넌트라는 점이 기존의 컴포넌트와의 차별점이다. 그 밖에도 공통된 레이아웃을 적용하는 방식이나, 메타데이터를 사용하는 방식, 그리고 데이터를 받아오는 방식 등이 달라졌습니다.React Server Component(RSC)란?리액트 서버 컴포넌트와 리액트 클라이언트 컴포넌트의 문법에서 가장 큰 차이는 데이터를 가져오는 방식입니다. 클라이언트에서 리퀘스트를 보내서 데이터를 받아오거나, Next.js에서 프리렌더링을 한다면 데이터를 Props로 내려받는데, 리액트 서버 컴포넌트를 사용하면 컴포넌트를 async/await 함수로 만들 수 있고, 함수 최상위(top-level)에서 await 로 데이터를 가져올 수 있습니다.
async/await를 사용해서 컴포넌트 함수를 작성하기 때문에 훨씬 직관적인 문법으로 컴포넌트를 개발할 수 있고, 서버에서 모든 데이터를 가져온 다음 렌더링까지 해서 보내주기 때문에 서버와 클라이언트가 여러 번 리퀘스트를 주고받을 때보다 빠르게 페이지를 보여줄 수 있다. 게다가 서버 컴포넌트 렌더링에 필요한 자바스크립트는 서버에서만 실행하기 때문에 클라이언트가 다운로드해야 할 자바스크립트 코드의 양도 줄어든다.
리액트 서버 컴포넌트는 서버에서만 렌더링하는 컴포넌트이다. 기존에 사용하던 컴포넌트 방식은 서버 컴포넌트와 구분하기 위해서 리액트 클라이언트 컴포넌트라고 부르기도 한다.
