NEXT
TIL | Next.js 13 간단 정리
얼마전, vercel에서 Nextjs ver13 관련 컨퍼런스를 진행하였다. 해당 컨퍼런스를 보고 블로그 및 문서들을 참고하여 어떠한 내용이 추가되었는지 정리해보았다. Install npx create-next-app@latest --experimental-app 시작하기 앞서, nextjs의 최신 버전을 설치하게 되면, 위와 같은 구조로 설치가 된다. 이전과 다르게 app 폴더가 생겼으며 tsx를 default로 설치가 된다. Router 가장 큰 특징중 하나로는 라우팅 구조이다. 기존에는 page 폴더에서 페이지 라우팅 컴포넌트만 선언하고 다른 폴더에서 관련 컴포넌트를 주입해 사용했던 구조였지만, 페이지 라우팅 컴포넌트 이외 컴포넌트들도 선언 및 활용이 가능할 수 있는 app 폴더가 생겼다. 이로 인..
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 Routing, Dynamic Routes
Routing, Dynamic Routes in NEXT NEXT.js에서는 React와 달리, 위처럼 폴더 구조를 기반으로 라우팅 기능을 제공한다. pages/index는 기본 라우트 경로인 /을 뜻하며, pages/hello는 /hello 라우트 경로를 뜻한다. Dynamic Routes의 경우, pages 경로 밑에 [] 형태를 가진 파일이 존재해야 한다. getStaticPaths export async function getStaticPaths() { return { paths: [{ params: { id: 1 } }, { params: { id: 2 } }], // array 형태 fallback: true, // boolean 형태 }; } 동적 라우팅 기능을 구현하기 위해서 NEXT.js..
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가..