NextJS3 [Next.js] package.json 파일의 dev, build, start 스트립트 스크립트 살펴보기Next.js 프로젝트의 package.json 파일에는 일반적으로 다음과 같은 스크립트가 포함됩니다:dev: 개발 모드에서 Next.js 애플리케이션을 실행합니다.build: Next.js 애플리케이션을 프로덕션 빌드로 준비합니다.start: 프로덕션 빌드된 Next.js 애플리케이션을 실행합니다.dev 스크립트개발 모드에서 Next.js 애플리케이션을 실행합니다.코드 변경 시 자동으로 새로고침되어 즉시 반영됩니다.디버깅 및 개발 목적으로 사용됩니다.build 스크립트Next.js 애플리케이션을 프로덕션 빌드로 준비합니다.최적화된 HTML, CSS, JavaScript 파일을 생성합니다.정적 파일 및 서버 사이드 렌더링(SSR) 코드를 포함합니다.배포를 위해 애플리케이션을 준비하는 데 .. 2024. 5. 2. [Next.js] App Router와 Pages Router의 특징 요약Next.js 13에서 도입된 App Router는 기존의 Pages Router와 다른 새로운 라우팅 방식입니다.App Router는 React의 최신 기능을 활용하여 애플리케이션을 구축할 수 있도록 하며, 라우팅과 레이아웃 경험을 개선합니다.Pages Router정의: 이전 버전의 Next.js에서 사용되던 라우팅 방식특징:/pages 디렉토리에 페이지 컴포넌트를 배치파일 이름이 곧 URL 경로가 됨페이지 간 상태 공유가 어려움레이아웃 구현이 복잡함App Router정의: Next.js 13에서 도입된 새로운 라우팅 방식특징:/app 디렉토리에 라우팅 및 레이아웃 구현컴포넌트 간 상태 공유가 용이레이아웃 구현이 간단해짐Server Components 아키텍처 지원스트리밍 및 Suspense 기능 .. 2024. 5. 2. [Next.js] CSR, SSG, ISR, SSR의 차이점과 장단점 요약CSR(Client-Side Rendering), SSG(Static Site Generation), ISR(Incremental Static Regeneration), SSR(Server-Side Rendering)은 웹 애플리케이션의 렌더링 방식에 따라 구분되는 개념입니다.각각의 방식은 장단점이 있으며, 웹 애플리케이션의 특성에 따라 적절한 방식을 선택해야 합니다.CSR (Client-Side Rendering)정의: 클라이언트(브라우저)에서 JavaScript를 실행하여 HTML을 생성하는 방식장점:빠른 초기 로딩 속도서버 부하 감소동적인 UI 구현 용이단점:초기 로딩 시 JavaScript 파일 다운로드 필요SEO 최적화 어려움자바스크립트 의존성 높음보안 취약점 존재SSG (Static Sit.. 2024. 5. 2. 이전 1 다음