DEV/Next.js

Next.js에서 로딩 상태를 관리하는 7가지 방법Next.js 애플리케이션을 개발하다 보면 데이터 페칭, 페이지 전환, 폼 제출 등 다양한 상황에서 로딩 상태를 처리해야 합니다. 사용자 경험을 높이기 위해 적절한 로딩 UI를 보여주는 것은 필수입니다.이 글에서는 Next.js(App Router 기준)에서 로딩 상태를 관리하는 7가지 방법을 상황별로 정리해보겠습니다.1. loading.tsx — 라우트 레벨 로딩 UI가장 간단하고 Next.js스러운 방법입니다. 라우트 폴더에 loading.tsx 파일을 생성하면, 해당 페이지가 렌더링되는 동안 자동으로 로딩 UI가 표시됩니다.// app/dashboard/loading.tsxexport default function Loading() { return..

미들웨어란?미들웨어는 요청이 완료되기 전에 실행되는 코드입니다. 그런 다음 요청 또는 응답 헤더를 수정하거나 리디렉션할 수 있습니다.Next.js에서는 페이지나 API 라우트가 실행되기 전에 미들웨어를 통해 요청을 가로채고 수정할 수 있습니다.주요특징Edge Runtime에서 실행 (Node.js Runtime으로 변경가능)페이지 렌더링 전에 동작요청/응답 수정 가능조건부 라우팅기본 설정파일 위치미들웨어 파일은 프로젝트 루트 또는 src 폴더에 위치해야 합니다your-project/├── middleware.ts # 루트에 위치└── src/ └── middleware.ts # 또는 src 폴더에 위치기본 구조import { NextResponse } from 'next/server'impor..

Next.js 프로젝트에서 브라우저 환경에 의존적인 라이브러리를 통합할 때 (ex. window 객체 사용) 여러 가지 문제가 생길 수 있습니다.문제 상황처음에는 클라이언트 사이드 라이브러리를 다음과 같이 직접 import 했습니다import SomeClientLibrary from 'some-client-library'이 방식은 브라우저에서 라이브러리를 표시할 수 있었지만, 다음과 같은 서버 사이드 렌더링(SSR) 관련 오류가 발생했습니다:⨯ ReferenceError: window is not defined첫 번째 시도: Dynamic Import첫 번째로는 Next.js의 dynamic import를 사용해보았습니다const DynamicComponent = dynamic(() => import('..