NextJS
TIL | Nextjs 환경변수
Loading Environment Variables(node, browser) Next.js에서는, CRA처럼 환경 변수를 자체적으로 지원해준다. 기본적으로 .env.local파일 안에 선언된 환경 변수에는, process.env.변수명을 통해 접근할 수 있다. API_END_POINT: examples => node 환경에서만 사용 가능 NEXT_PUBLIC_API_END_POINT: examples => 브라우저 환경에서 사용 가능 기본적으로 env.local 내부 선언된 모든 환경변수들은 Node.js환경에서만 사용할 수 있지만, 브라우저에서 사용하고자 할 경우 NEXT_PUBLIC_ 키워드를 붙여야 사용이 가능하다. ( SSR이 아닌, CSR 요소에 해당 환경변수를 사용하고자 할 경우 NEXT_..
TIL | NEXTjs Build indicator 대신 Loading spinner로 변경하기
NEXTjs Build indicator 대신 Loading spinner로 변경하기 Nextjs에서 페이지 이동시 혹은 페이지 진입시 build 과정 동안 우측 하단에 나타나는 Build indicator 대신 페이지의 Loading Spinner 를 띄우기 위해 공식 문서를 참조하여 적용해보았다. Build Activity deActivate // next.config.js module.exports = { devIndicators: { buildActivity: false, }, }; build indicator를 비활성화하기 위해 next.config.js에서 위와 같이 설정해주었다. Loading spinner import React, { useState, useEffect } from "rea..
TIL | Dynamic import
NEXTjs Dynamic import Dynamic import란? ES2020에서 제공하는 dynamic import은, 해당 모듈을 애플리케이션의 빌드 타임에 불러오는 것이 아니라 런타임때 불러오는 것이다. 즉 처음 받아오는 모듈 (혹은 소스코드)의 용량을 줄임으로써 페이지의 초기 로딩 속도를 줄일 수 있다.(초기 페이지 로딩시 불필요한 모듈 fetch을 줄임으로써 성능 최적화를 할 수 있다.) NEXTjs에서의 적용 Basic usage 공식문서에서도 말하기를, NEXTjs 또한 dynamic import를 지원하며 SSR에도 적용이 가능하다. // import dynamic from "next/dynamic"; const DynamicComponent = dynamic(() => import("..
TIL | NEXTjs Pre-rendering
Pre-rendering NEXT-js를 사용하게 되면 기본적으로 모든 페이지마다 Pre-rendering을 하게 된다. CRA를 통해 구현한 SPA의 Client-side Rendering과 다르게 렌더링의 주체가 client가 아닌 server이며, 이는 성능 개선 및 보다 향샹된 SEO를 제공한다. (비교 글은 여기 작성해놓았다.) Pre-rendering은 정적 요소가 먼저 그려진 후 사용자에게 보여지며, JS 로딩 후 정적 문서를 데이터 변경 및 사용자에게 반응할 수 있는 동적 형태로 변환하는 과정이 이루어진다. (이를 hydration이라고 한다.) NEXT는 두 가지 형태의 Pre-rendering가 존재하는데, 이는 다음과 같다. Static Generation DOM 요소들이 build가..