AI 요약관련 정보

• Next.js 프로젝트는 npx create-next-app . 명령어로 빠르게 시작하며, App Router 기반의 보일러플레이트가 생성됩니다. 🚀
• 프로젝트는 public (정적 자산), src (소스 코드), node_modules 및 설정 파일로 구성되며, src 폴더에서 대부분의 개발이 이루어집니다. 📁
• page.tsx는 각 경로의 UI를 정의하고, layout.tsx는 모든 페이지에 적용되는 공유 UI(헤더, 푸터)와 메타데이터를 설정합니다. 🖼️
• 개발 시 TurboPack을 활용하여 로컬 개발 서버의 속도를 크게 향상시킵니다. ⚡
• 라우팅은 폴더 구조를 따르며, [폴더명] 문법을 사용하여 동적 경로를 쉽게 구현할 수 있습니다. 🛣️
• 기본적으로 모든 컴포넌트는 서버 컴포넌트이며, 서버에서 직접 데이터 페칭 및 데이터베이스 상호작용이 가능합니다. 🖥️
• 클라이언트 컴포넌트는 'use client' 지시어를 통해 브라우저 이벤트 처리, React 훅(예: useState) 사용 등 클라이언트 측 상호작용이 필요할 때 사용됩니다. 🌐
• 데이터 페칭은 서버 컴포넌트 내에서 외부 API나 ORM을 사용하여 직접 수행할 수 있으며, 이는 서버에서만 실행됩니다. 📊
• Server Actions는 데이터 생성, 업데이트, 삭제와 같은 "뮤테이션"을 서버에서 직접 처리하여, 별도의 API 엔드포인트 없이 폼 제출을 간소화합니다. ✍️
• Route Handlers (route.ts)를 통해 여전히 RESTful API 엔드포인트를 생성할 수 있으며, 웹훅 처리 등에 유용합니다. 📡
• Middleware (middleware.ts)는 서버로 들어오는 요청을 가로채어 인증, 로깅, 리다이렉션 등 전역적인 로직을 실행할 수 있습니다. 🚦
• 배포를 위해 npm run build 명령어로 앱을 최적화하고, 정적 페이지를 미리 렌더링하여 SEO와 로딩 성능을 향상시킵니다. 🏗️
• generateStaticParams를 사용하여 동적 경로에 대한 특정 파라미터 조합으로 빌드 시 정적 페이지를 미리 생성하여 성능을 최적화합니다. ⚙️
• Next.js 앱은 Coolify와 같은 도구를 활용하여 Hostinger와 같은 VPS에 쉽게 자체 호스팅하고 배포할 수 있습니다. ☁️