NEXT5 TIL | Next.js 13 간단 정리 얼마전, vercel에서 Nextjs ver13 관련 컨퍼런스를 진행하였다. 해당 컨퍼런스를 보고 블로그 및 문서들을 참고하여 어떠한 내용이 추가되었는지 정리해보았다. Install npx create-next-app@latest --experimental-app 시작하기 앞서, nextjs의 최신 버전을 설치하게 되면, 위와 같은 구조로 설치가 된다. 이전과 다르게 app 폴더가 생겼으며 tsx를 default로 설치가 된다. Router 가장 큰 특징중 하나로는 라우팅 구조이다. 기존에는 page 폴더에서 페이지 라우팅 컴포넌트만 선언하고 다른 폴더에서 관련 컴포넌트를 주입해 사용했던 구조였지만, 페이지 라우팅 컴포넌트 이외 컴포넌트들도 선언 및 활용이 가능할 수 있는 app 폴더가 생겼다. 이로 인.. 2022. 11. 25. 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_.. 2022. 1. 21. 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(".. 2021. 10. 30. 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.. 2021. 10. 24. 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가.. 2021. 10. 24. 이전 1 다음