NextJS

🧩 Routing이란? Routing은 브라우저 경로에 따라 다른 화면을 보여주는 것을 말한다. React에서는 routing을 구현하기 위해 주로 react-router-dom 라이브러리를 사용한다. 반면, Next에서는 별도의 라이브러리가 필요하지 않다. 📌

NextJS 공식문서를 참고하여 작성했습니다. 💅 Custom App NextJS에서는 페이지를 초기화하기 위해 App 컴포넌트를 사용한다. App 컴포넌트는 pages/_app.tsx에 작성된다. App 컴포넌트를 override할 수 있고, 페이지 초기화를 마음

📌 Client Side Rendering CSR은 react, vue 등의 SPA(Single Page Application)에서 쓰이는 기법으로, 클라이언트 측에서 화면을 구성하고 렌더링을 진행한다. 초반 사용자 경험이 좋지 않다. 👥 클라이언트 측에서 JS

NextJS 공식문서 👍 Layout Head 🗺️ Layout navigation이나 footer와 같은 공통 레이아웃은 Layout component로 만들고 _app.tsx에 import하여 렌더링한다. Example 🧠 Head Head compone

NextJS 공식문서 👍 next.config.js redirects rewrites ⚙️ next.config.js Next.js에서 커스텀 고급(?) 설정을 하기 위해서 프로젝트 디렉터리 루트에 next.config.js 파일을 만들 수 있다. next.conf

NextJS는 Client Side Rendering과 Server Side Rendering 둘다 이용한다. 최초로 페이지에 들어올 때는 Server Side Rendering을 이용하고 이후에는 Client Side Rendering을 이용한다. > NextJS

시작하기 전에 NextJS는 기본적으로 페이지를 SSR을 이용해 pre-rendering한다. Server Side에서 html 파일을 구성하여 브라우저 측에 전달해 렌더링한다.(CSS도 렌더링됨) 이후 JS 파일이 로드되어 자바스크립트 코드가 적용된다. 👉 Next

NextJS에서 Image 컴포넌트를 제공하는 것을 모르고 img 태그를 썼는데 아래와 같이 배포 과정에서 warning 메시지가 떴다. 그래서 img 태그를 Image 컴포넌트로 바꾸었고 그 과정에서 공부한 내용들을 정리해보려고 한다. > 👀 NextJS 공식문서

NextJS 공식문서 👍 Pre-rendering Pre-rendering 기본적으로 NextJS는 모든 페이지를 pre-rendering 한다. 클라이언트 측 자바스크립트가 로드되지 전에 미리 각 페이지 별 HTML 파일을 만든다. 데이터가 있는 HTML 파일을

React Query는 서버 사이드에서 prefecth한 데이터를 queryClient에 전달하는 2가지 방법을 지원한다. Using "initialData" getStaticProps나 getServerSideProps 함수와 useQuery 옵션 중 initalD