#next.js
관련 글 14건
강경원· 1일 전Next.js App Router에서 페이지를 조립만 하게 만들기
서버 컴포넌트 시대에 페이지 파일이 비대해지는 걸 막는 규칙 하나 — 페이지는 조립만 한다. lib/queries와 lib/actions로 분리한 구조 정리.
next.jsarchitecture- 강경원· 1일 전
Next.js ISR 때문에 조회수가 멈춘 것처럼 보였다
DB엔 쌓이는데 화면은 그대로라면 캐시부터 의심하라. ISR 페이지에서 실시간 데이터만 클라이언트로 분리한 과정.
next.jsfrontend - 강경원· 2월 10일
Next.js 캐싱 전략 - ISR, SSG, SSR 캐시 제어
Next.js는 다양한 캐싱 전략을 제공하여 성능을 최적화합니다. 이 글에서는 fetch 옵션, revalidate , generateStaticParams 등을 활용한 캐싱 전략을 정리합니다. 1. fetch 캐시 옵션 force cache : 빌드 시 또는 첫 요청 시 캐시하고 재사
next.jscachingisr - 강경원· 2월 10일
React Server Components - 서버에서 렌더링되는 컴포넌트
React Server Components RSC 는 서버에서만 실행되고, 클라이언트로 JavaScript 번들을 전송하지 않는 새로운 컴포넌트 모델입니다. Next.js 13+ App Router에서 기본으로 사용되며, 성능과 번들 크기 최적화에 큰 도움을 줍니다. 1. Server
reactserver-componentsnext.js - 강경원· 2월 10일
Next.js Middleware - 요청 가로채기와 엣지 런타임
Next.js Middleware는 요청이 완료되기 전에 실행되는 코드로, 리다이렉트, 헤더 수정, 인증 체크 등을 처리할 수 있습니다. Edge Runtime에서 실행되어 매우 빠른 응답 시간을 제공합니다. 1. 기본 Middleware 구조 middleware.ts 는 프로젝트 루트
next.jsmiddlewareedge - 강경원· 2월 10일
Next.js Image 최적화 - 자동 이미지 최적화와 성능 개선
Next.js의 Image 컴포넌트는 이미지를 자동으로 최적화 하고, 지연 로딩, 반응형 크기 조정 등을 제공합니다. 이 글에서는 next/image 를 사용하여 이미지 성능을 개선하는 방법을 정리합니다. 1. 기본 사용법 width 와 height 를 명시해야 레이아웃 시프트 CLS
next.jsimageoptimization - 강경원· 2월 10일
Next.js API Routes - 서버리스 함수로 백엔드 구현
Next.js API Routes는 서버리스 함수 로 백엔드 API를 구현할 수 있게 해줍니다. 프론트엔드와 백엔드를 같은 프로젝트에서 관리할 수 있어, 작은 프로젝트나 프로토타입에 적합합니다. 1. 기본 API Route 구조 HTTP 메서드 이름 GET , POST , PUT , D
next.jsapi-routesserverless - 강경원· 2월 10일
Next.js Metadata API - SEO와 소셜 미디어 최적화
Next.js 13+ App Router에서는 metadata 객체나 generateMetadata 함수로 SEO 메타데이터를 선언적으로 관리 할 수 있습니다. 이 글에서는 페이지별 메타데이터 설정과 동적 메타데이터 생성 방법을 정리합니다. 1. 정적 메타데이터 metadata 객체로
next.jsmetadataseo - 강경원· 2월 10일
Next.js 폰트 최적화 - next/font로 웹폰트 성능 개선
Next.js의 next/font 는 웹폰트를 자동으로 최적화 하여 레이아웃 시프트 CLS 를 방지하고 로딩 성능을 개선합니다. Google Fonts, 로컬 폰트 모두 지원하며, 자동으로 폰트 파일을 최적화합니다. 1. Google Fonts 사용 Google Fonts는 빌드 시 자
next.jsfontoptimization - 강경원· 1월 28일
Next.js 16 정리 - React 18 시대의 풀스택 프레임워크
Next.js 16은 React 18을 기반으로 하는 풀스택 웹 프레임워크 로, 서버 컴포넌트 App Router , 스트리밍, 캐시, 미들웨어 등 프론트엔드와 백엔드를 모두 아우를 수 있는 기능을 제공합니다. 이 글에서는 Next.js 16에서 핵심적으로 알아야 할 개념과, 실무에서
next.jsreactapp-router - 강경원· 1월 24일
React Query 심화 - 캐싱 전략과 무한 스크롤, 에러 핸들링
React Query는 클라이언트에서 서버 상태 데이터 를 관리하는 데 특화된 라이브러리입니다. 이 글에서는 기본 useQuery / useMutation 에서 한 단계 나아가, 캐싱 전략, 무한 스크롤, 에러 핸들링 을 중심으로 정리합니다. 1. 캐시 전략: staleTime, cac
reactreact-querynext.js - 강경원· 11월 28일
Next.js에서 Utterances 댓글 시스템 구현하기
Next.js에서 Utterances 댓글 시스템 구현하기 Utterances는 GitHub 이슈를 활용하여 웹사이트에 간단하게 댓글 시스템을 추가할 수 있는 오픈 소스 프로젝트입니다. Next.js 프로젝트에 Utterances를 삽입하는 방법과, 테마 전환 시 깜빡임이 발생하는 방식
reactnext.jsutterances - 강경원· 11월 26일
Next.js App Router 정리
Next.js의 App Router 는 13버전부터 도입된 새로운 라우팅 방식으로, 기존의 Pages Router 보다 더 현대적이고 유연한 기능을 제공합니다. App Router를 통해 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 관리하며 React 18의 기능을 최대한 활용할 수
reactnext.js - 강경원· 11월 26일
React Query useQuery
react query v4 설치 react query 브라우저 호환 아무 버전이나 다 되는 줄 알았는데, 호환하는 브라이저가 있는걸 알았다. react query 설정하기 1. quertClient를 모든 컴포넌트가 접근하는 CRA는 app.tsx, Next.js는 \ app.tsx에
reactreact-querynext.js