본문 바로가기

Next.js

Next.js 10-1 React Essentials Next.js로 앱을 구축하려면 Server Components와 같은 React의 최신 기능에 익숙해지는 것이 도움이 된다. 여기에서는 Server Component와 Client Component의 차이점, 사용 시기와 권장 패턴을 살펴보고자 한다. Server Component 서버 및 클라이언트 컴포넌트를 사용하면 개발자가 서버와 클라이언트에 걸쳐 있는 응용 프로그램을 구축하여 클라이언트 측 앱의 풍부한 상호 작용과 기존 서버 렌더링의 향상된 성능을 결합할 수 있다. React가 UI 구축에 대한 생각 방식을 어떻게 바꾸었는지 React Server Components를 통해 알 수 있는데, React Server Components는 서버와 클라이언트를 활용하는 하이브리드 애플리케이션 구축을 위.. 더보기
Next.js 9-2. Image Component and Image Optimization Priority 각 페이지의 LCP(Largest Contentful Paint) 요소가 될 이미지에 priority 속성을 추가해야 한다. LCP(Largest Contentful Paint)는 페이지에서 가장 큰 콘텐츠가 로드되어 화면에 나타나는 데 걸리는 시간을 나타내는 웹 측정 지표이다. LCP는 웹 페이지의 사용자 경험에 큰 영향을 미치는 중요한 지표 중 하나이다. 사용자가 기다리는 시간이 길어질수록 이탈률이 높아지기 때문이다. 보통 LCP는 이미지, 동영상, 텍스트 등의 콘텐츠 중에서 가장 큰 것을 기준으로 측정된다. 따라서 페이지가 로드되는 동안 LCP가 발생하지 않은 경우 페이지 로딩 속도가 느려질 가능성이 높다. LCP는 Goolge의 Core Web Vitals 중 하나로 검색 엔진 최.. 더보기
Next.js 9-1. Image-Component and Image Optimiztion Next.js는 이미지 최적화에 대한 많은 기능을 제공한다. Next.js에서 이미지를 사용하면 다음과 같은 이점이 있다. 1. 더 빠른 페이지 로딩 속도 이미지 최적화를 통해 페이지 로딩 속도를 높일 수 있다. 2. SEO 최적화 이미지 최적화를 통해 이미지의 alt 텍스트를 자동으로 생성할 수 있다. 3. 반응형 이미지 지원 Next.js Image Component를 사용하면 이미지를 자동으로 조정하여 모바일 기기와 데스크탑 기기에 모두 적합한 이미지를 제공할 수 있다. 이미지 컴포넌트 사용하기 Next.js의 Image Component는 이미지 최적화에 대한 모든 작업을 처리한다. Image Component를 사용하기 위해서는 다음과 같이 코드를 작성한다. import Image from 'n.. 더보기
Next.js 8. Layout React 모델을 사용하면 페이지를 일련의 컴포넌트로 분해할 수 있다. 이러한 컴포넌트 중 다수는 종종 페이지간에 재사용된다. 예를 들어 모든 페이지에 동일한 탐색 모음과 바닥글이 있을 수 있다. // components/layout.js import Navbar from './navbar' import Footer from './footer' export default function Layout({ children }) { return ( {children} ) } 커스텀 앱의 단일 공유 레이아웃 전체 앱에 대해 하나의 레이아웃만 있는 경우 사용자 지정 앱을 생성하고 해당 레이아웃으로 앱을 래핑 할 수 있다. 페이지를 변경할 때 컴포넌트가 재사용되기 때문에 해당 컴포넌트의 상태(예: 입력 값)가 보존.. 더보기
Next.js 7. Built-in CSS Support Next.js를 사용하면 JavaScript 파일에서 CSS 파일을 가져올 수 있다. 이는 Next.js가 자바스크립트를 넘어서는 개념을 확장했기 때문에 가능하다. 전역 스타일시트 추가하기 먼저 전역 스타일을 지정할 styles.css를 만든다. body { font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'; padding: 20px 20px 60px; max-width: 680px; maring: 0 auto; } 그리고 _app.js 파일을 만들고 다음과 같이 해당 css파일을 import 해준다. import '../styles.css' // 이 default export는 새.. 더보기
Next.js 6. Client-side data fetching 클라이언트 측 데이터 가져오기 (Client-side data fetching)는 페이지에 SEO 인덱싱이 필요하지 않거나, 데이터를 사전 렌더링 할 필요가 없거나, 페이지 콘텐츠를 자주 업데이트해야 하는 경우에 유용하다. 서버 측 API와 달리 컴포넌트 수준에서 클라이언트 측 데이터 가져오기를 사용할 수 있다. 페이지 수준에서 수행되는 경우 런타임에 데이터를 가져오고 데이터가 변경되면 페이지 콘텐츠가 업데이트된다. 컴포넌트 수준에서 사용하는 경우 컴포넌트가 마운트 될 때 데이터를 가져오고 컴포넌트의 내용은 데이터가 변경됨에 따라 업데이트된다. 클라이언트 측 데이터 가져오기를 사용하면 애플리케이션의 성능과 페이지의 로드 속도에 영향을 미칠 수 있다는 점에 유의해야 한다. 이는 컴포넌트 또는 페이지가 마운.. 더보기
Next.js 5-2. ISR(Incremental Static Regeneration) 오류 처리와 재검증 백그라운드에서 재생성을 처리할 때 내부에 오류가 있거나 수동으로 오류를 발생시키면 마지막으로 성공적으로 생성된 페이지가 계속 표시된다. 그리고 다음 후속 요청에서 Next.js는 호출을 다시 시도한다. export async function getStaticProps() { // 이 요청에서 포착되지 않은 오류가 발생하면 Next.js는 // 현재 표시된 페이지를 무효화하지 않고 // 다음 요청에서 getStaticProps를 재시도한다. const res = await fetch('https://.../posts') const posts = await res.json() if (!res.ok) { // 서버 오유가 있는 경우 다음을 수행할 수 있다. // 캐시 업데이트되지 않도록 반.. 더보기
Next.js 5-1. ISR(Incremental Static Regeneration) ISR(Incremental Static Regeneration)은 Next.js에서 제공하는 정적인 페이지를 빌드할 때 매번 다른 전체 페이지를 다시 빌드하는 것이 아니라 변경된 부분만 빌드하고 나머지는 캐시 된 결과를 사용하는 정적 페이지를 업데이트하는 기능이다. ISR을 사용하면 페이지를 빌드할 때, 변경될 가능성이 있는 부분만 미리 빌드하여 캐시에 저장한다. 그리고 사용자가 해당 페이지를 요청할 때 미리 빌드한 부분은 캐시에서 가져오고 변경될 가능성이 있는 부분은 실제 데이터를 사용하여 업데이트한 후에 페이지를 반환한다. 이를 통해 정적 페이지의 빌드 시간을 줄이고, 업데이트된 데이터를 빠르게 반영할 수 있다. 예를 들어 블로그 포스트 목록 페이지에서 새로운 포스트가 추가되는 경우, 해당 포스트에.. 더보기

티스토리툴바