npm run build 명령어를 통해 프로젝트를 빌드하던 중, 다음과 같은 에러가 발생했습니다. ⨯ useSearchParams() should be wrapped in a suspense boundary at page "/". Read more: https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout에러 메시지를 보면 useSearchParams() 훅이 반드시 Suspense 경계 안에 포함되어야 한다고 명시하고 있습니다. 저는 이 에러를 아래와 같은 코드에서 만났습니다."use client"export default function Searchbar() { const router = useRouter(); const searc..

검색 엔진 최적화(SEO, Search Engine Optimization)는 구글, 네이버 같은 포털 사이트가 우리의 웹 서비스를 더 잘 인식하고 검색 결과에 노출되도록 돕는 중요한 기술입니다. 검색 엔진이 페이지의 구조나 정보를 올바르게 수집하도록 돕는 대표적인 SEO 설정 방식으로는 다음이 있습니다:Sitemap 설정RSS 발행시멘틱 태그 적용메타데이터 설정 이번 포스트에서는 이 중 메타데이터 설정에 집중하여,Next.js App Router 기반 프로젝트에서 정적/동적 메타데이터를 설정하는 방법을 실습해보겠습니다. 🏷 기본적인 메타데이터 설정 (정적)Next.js에서는 각 페이지 파일 상단에 metadata 객체를 export함으로써 해당 페이지의 태그에 자동으로 메타 정보를 삽입할 수 있..

웹페이지의 성능을 최적화하는 데 있어 이미지 최적화는 필수적인 작업입니다.HTTP Archive의 조사에 따르면, 이미지는 웹페이지 용량의 평균 58%를 차지한다고 합니다.즉, 페이지 전체 용량의 절반 이상이 이미지라는 의미이며, 이로 인해 웹 개발자에게 이미지 최적화는 선택이 아닌 필수 과제가 되었습니다. 📦 다양한 이미지 최적화 기법이미지 최적화를 위해 일반적으로 사용되는 기법들은 다음과 같습니다.WebP, AVIF 등의 차세대 이미지 포맷으로 변환디바이스 크기에 맞는 이미지 리사이징Lazy Loading 적용로딩 중 블러 이미지 표시기타 다양한 전략들이처럼 많은 기법들이 존재하지만, 다행히도 Next.js에서는 이러한 기능들이 대부분 자동으로 제공됩니다.Next.js의 컴포넌트를 사용하면 위의..

Next.js App Router에서 제공하는 고급 라우팅 기능 중 패럴렐 라우트(Parallel Route)와 인터셉팅 라우트(Intercepting Route)는 복잡한 UI를 구성할 때 매우 유용한 패턴입니다. 특히 소셜 미디어나 관리자 대시보드처럼 하나의 화면 안에 여러 페이지를 병렬적으로 렌더링하거나, 특정 조건에서 라우팅을 가로채는 기능이 필요한 경우 강력한 도구가 되어줍니다. 🌿 패럴렐 라우트 (Parallel Route) 예를 들어, 소셜 서비스에서 Sidebar와 Feed 페이지를 동시에 보여줘야 할 경우 다음과 같이 구성할 수 있습니다. 📁 디렉토리 구조app/ ├─ @sidebar/ │ └─ page.tsx ├─ @feed/ │ └─ page.tsx └─ layout.t..

Next.js 14부터 도입된 서버 액션(Server Actions)은 클라이언트에서 서버의 함수를 직접 호출할 수 있게 해주는 강력한 기능입니다.이 기능을 활용하면 별도의 API 라우트를 만들지 않아도 폼 제출을 통해 서버에서만 실행되는 비동기 함수를 호출할 수 있어 훨씬 간단하고 직관적인 개발이 가능합니다. 💡 서버 액션 기본 사용법export default function Page() { const saveName = async (formData: FormData) => { "use server"; const name = formData.get("name"); await saveDB({ name }); // ⓵ DB 함수 호출 await sql`INSERT INTO Nam..

Next.js에서는 HTML 스트리밍 기능을 통해 사용자에게 더 빠르고 부드러운 페이지 로딩 경험을 제공할 수 있습니다.이 게시물에서는 스트리밍이 무엇인지부터 Next.js에서의 사용법, 그리고 loading.tsx와 React.Suspense를 적절히 활용하는 방법까지 하나하나 예제를 통해 소개하겠습니다. ✅ 스트리밍(Streaming)이란?스트리밍은 서버에서 클라이언트로 데이터를 한번에 모두 전달하는 것이 아니라, 작게 나눈 데이터 조각을 순차적으로 전송하는 방식입니다.예를 들어, 서버에서 큰 데이터를 처리하거나 시간이 오래 걸리는 작업이 있다면, 그 작업이 끝나기를 기다리지 않고 준비된 부분부터 먼저 보내는 것이 스트리밍입니다. 덕분에 사용자는 모든 데이터가 준비되기 전에도 화면을 볼 수 있어서 ..

Next.js는 사용자 경험을 향상시키기 위해 다양한 최적화 전략을 제공합니다.그중 하나가 클라이언트 라우터 캐시(Client Router Cache)입니다.이번 포스트에서는 이 기능이 어떻게 동작하고, 어떤 상황에서 성능 향상에 기여하는지 살펴보겠습니다. 📍 클라이언트 라우터 캐시란?클라이언트 라우터 캐시는 브라우저 측에서 페이지 전환에 필요한 일부 데이터를 캐싱하여, 동일한 데이터를 반복해서 서버에 요청하지 않도록 하는 기능입니다. 이를 통해 페이지 전환 시 성능을 개선하고, 중복된 데이터 요청을 줄일 수 있습니다. 🔄 예시 시나리오사용자가 / (홈) 페이지에서 /search 페이지로 이동한다고 가정해봅시다.이 두 페이지는 RootLayout, SearchbarLayout 같은 공통 레이아웃 ..

Next.js에서는 각 페이지의 렌더링 방식을 정교하게 제어할 수 있는 설정들이 제공됩니다.그중 하나가 바로 export const dynamic 옵션입니다. 이 옵션은 해당 페이지를 강제로 Static 또는 Dynamic 페이지로 설정할 수 있게 해줍니다.즉, 내부에 동적 함수가 있는지, 캐시가 설정되어 있는지와 관계없이 명시적으로 렌더링 방식을 고정할 수 있습니다. 1. auto (기본값)export const dynamic = "auto";별도로 설정하지 않으면 기본값으로 사용됩니다.동적 함수 사용 여부, 데이터 캐시 설정 등을 바탕으로 Next.js가 페이지 유형을 자동으로 판단합니다.명시적으로 설정하지 않아도 자동 적용되므로 생략 가능하며, 일반적으로 가장 권장되는 방식입니다. 2. ..

Next.js는 페이지를 더 빠르게 전달하기 위해 다양한 캐싱 전략을 제공합니다.그중 풀 라우트 캐시(Full Route Cache)는 빌드 타임에 페이지를 미리 렌더링하고 저장해 두어, 요청 시 빠르게 응답할 수 있도록 해주는 강력한 기능입니다. 이 글에서는 풀 라우트 캐시의 개념, 적용 기준, 그리고 언제 사용하면 좋은지에 대해 자세히 알아봅니다. 💡 풀 라우트 캐시란 ?풀 라우트 캐시는 Next.js 서버가 빌드 시점(build time)에 특정 페이지의 렌더링 결과를 미리 생성해 저장해두는 기능입니다.예를 들어 /a 경로의 페이지가 풀 라우트 캐시에 포함되어 있다면, 서비스 중에 /a에 요청이 오더라도 새롭게 렌더링하지 않고, 미리 생성된 HTML을 그대로 응답합니다. 덕분에 매우 빠른 응답..