TwentyTwentyOne

🏠 Next.js App Router Self‑Hosting 완벽 가이드Next.js는 Vercel에 최적화되어 있지만, 자체 서버(Node.js, Docker, CDN 등)에서도 강력하게 작동할 수 있도록 설계되어 있습니다. 이 글에서는 App Router 기반 프로젝트를 스스로 호스팅할 때 알아야 할 모든 내용을 정리합니다.🛠 1. 실행 방식 선택Node.js 서버 실행npm run buildnpm run startnext start는 production 모드 실행모든 기능(SSR, API Route, 이미지 최적화 등) 사용 가능Docker 컨테이너next build → 이미지 생성 후 컨테이너화Kubernetes, AWS ECS, GCP 등에서 사용 가능정적 사이트 내보내기next export..

🧩 Next.js App Router에서 Script 효율적으로 사용하는 법외부 스크립트, 분석 도구, 광고 태그 등을 삽입할 때 성능을 해치지 않으면서 적절한 위치에 넣는 것이 중요합니다. Next.js는 이를 위해 next/script 컴포넌트를 제공합니다.✅ 1. 기본 사용법import Script from 'next/script';next/script는 태그보다 더 안전하고 최적화된 방식으로 작동합니다.로딩 전략을 조절해 퍼포먼스를 관리할 수 있습니다.✅ 2. 로딩 전략 (strategy)스크립트가 언제 로드되어야 할지를 명확히 설정하세요.전략 이름 설명beforeInteractiveReact hydration 전에 로드 – 페이지 초기 필수 스크립트afterInteractive(기본값) hy..

🎨 Next.js에서 Sass(.scss) 사용하는 방법Sass는 CSS를 더 강력하고 유연하게 다룰 수 있게 해주는 전처리기입니다. Next.js는 Sass를 공식적으로 지원하며, 간단한 설정만으로 바로 사용할 수 있습니다.✅ 1. Sass 설치하기npm install --save-dev sass설치 후 .scss 또는 .sass 파일을 프로젝트에 자유롭게 사용할 수 있습니다. 일반적으로 .scss 확장자를 더 많이 사용합니다.✅ 2. CSS Module 형태로 사용하기컴포넌트마다 스타일을 모듈화하려면 .module.scss 확장자를 사용하면 됩니다./* Button.module.scss */.button { background-color: #0070f3; color: white; padding..

🔁 Next.js App Router 리디렉션 가이드Next.js에서는 사용자의 액션, URL 변경, 인증 상태 등에 따라 다양한 방식으로 리디렉션을 처리할 수 있습니다. 각각의 상황에 맞는 구현법을 정리해봤습니다.✅ 1. redirect() – 서버 컴포넌트, 서버 액션용 (307)서버에서 사용자 요청을 받고 특정 URL로 리디렉션할 때 사용합니다.'use server';import { redirect } from 'next/navigation';export async function createPost() { // DB 작업 후 리디렉션 redirect('/posts/123');}기본은 307 Temporary RedirectPOST 후 리디렉션 시 주로 사용✅ 2. permanentRedire..

📲 Next.js App Router에서 PWA 구축하기PWA(Progressive Web App)는 웹앱을 설치 가능한 형태로 제공하고, 오프라인 사용이나 푸시 알림 등 네이티브 앱 같은 사용자 경험을 제공합니다. Next.js에서 App Router 기반으로 PWA를 구현하는 방법을 정리합니다.✅ 1. 웹 앱 매니페스트 생성앱 이름, 아이콘, 시작 경로 등을 정의한 manifest.ts 또는 manifest.json 파일을 app/ 폴더 아래에 생성합니다.// app/manifest.tsimport type { MetadataRoute } from 'next';export default function manifest(): MetadataRoute.Manifest { return { name..

✅ Next.js App Router 프로덕션 체크리스트Next.js 앱을 배포하기 전에 성능, 보안, SEO, 접근성 등을 점검해야 안정적인 서비스 운영이 가능합니다. 아래는 실무 배포 시 꼭 확인해야 할 핵심 항목들입니다.🚀 자동 최적화 기능서버 컴포넌트 기본 사용 → 클라이언트 번들 최소화자동 코드 스플리팅 → 페이지 단위로 분할 로딩라우트 간 prefetch 자동 처리 → 빠른 탐색정적 페이지 캐싱 및 ISR → 성능 향상라우트 핸들러에서 캐시 전략 제어 가능🛠 개발 구조 점검공통 UI는 레이아웃으로 구성 → 중복 제거 및 캐시 활용페이지 전환은 사용 → 클라이언트 내비게이션 최적화에러 핸들링 구성: error.tsx, not-found.tsx클라이언트 컴포넌트와 서버 컴포넌트 구분 명확히?..

📦 Next.js App Router 패키지 번들 최적화 가이드Next.js App Router 환경에서 앱의 초기 로딩 속도와 런타임 성능을 높이려면, 외부 패키지 번들링을 전략적으로 관리해야 합니다. 이 글에서는 번들 분석, 패키지 트랜스파일링, 최적화 옵션 설정 방법 등을 정리합니다.✅ 1. 번들 분석 도구 사용Next.js 프로젝트의 번들 크기를 시각적으로 확인하려면 @next/bundle-analyzer를 사용하세요.npm install @next/bundle-analyzernext.config.js 설정 예시:const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true',..

🎯 Next.js + OpenTelemetry: 관측성 통합 가이드Next.js 프로젝트에 OpenTelemetry를 도입하면, 성능 병목, 에러 원인, 백엔드 호출 흐름 등을 시각적으로 추적할 수 있습니다. 특히 App Router 구조에서는 SSR, API Route, Middleware 트레이싱까지 폭넓게 활용 가능합니다.🛠️ 1. 설치 및 기본 구성패키지 설치npm install @vercel/otelinstrumentation.ts 파일 생성// 프로젝트 루트에 생성import { registerOTel } from '@vercel/otel';export function register() { registerOTel({ serviceName: 'my-next-app' });}next.con..

🔍 Next.js에서 OpenTelemetry로 관측성(Observability) 구축하기Next.js는 기본적으로 SSR과 동적 기능을 지원하기 때문에 복잡한 서비스 구조에서 성능 추적과 오류 진단이 필수입니다. 이때 표준화된 오픈소스인 OpenTelemetry를 활용하면 로그, 메트릭, 트레이스를 통합적으로 수집하고 시각화할 수 있습니다.✅ OpenTelemetry란?OpenTelemetry(OTel)는 다음 세 가지를 하나로 추적할 수 있는 표준 프레임워크입니다.📈 메트릭 (Metrics)🔍 트레이스 (Traces)🪵 로그 (Logs)서버와 클라이언트의 경계를 넘나드는 요청 흐름을 추적할 수 있어 성능 병목과 오류 발생 지점을 빠르게 파악할 수 있습니다.✅ 기본 설정 방법 (@vercel/o..

🔗 Next.js Multi-Zones: 대규모 프로젝트를 위한 마이크로 프론트엔드 전략Next.js는 기본적으로 하나의 앱을 기준으로 동작하지만, 규모가 커질수록 기능을 여러 개의 앱으로 나눠야 할 필요가 생깁니다. 이때 유용한 기능이 바로 Multi-Zones입니다.✅ Multi-Zones란?Multi-Zones는 하나의 도메인(예: example.com)에서 여러 개의 Next.js 앱을 각각 다른 경로에 배치하여 하나의 통합된 애플리케이션처럼 제공하는 구조입니다.예시:/ → main-app/blog → blog-app/admin → admin-app각 앱은 서로 완전히 독립적으로 개발·배포할 수 있으면서도, 사용자에게는 하나의 사이트처럼 보입니다.✅ 언제 사용하나?팀별로 앱을 분리하고 싶은 경우..