Next.js는 React 기반의 웹 프레임워크로, 서버 사이드 렌더링, 클라이언트 사이드 라우팅, 자동 코드 분할을 지원합니다. 모듈 시스템과 플러그인을 활용하여 간편한 개발이 가능하며, 정적 파일 서빙과 서버리스 함수를 통한 API 개발이 쉽습니다. TypeScript를 기본적으로 지원하며, 개발 생산성을 향상시키는데 기여합니다.
-
서버 사이드 렌더링 (SSR): Next.js는 서버 사이드 렌더링을 지원하여 초기 로딩 속도를 개선하고 검색 엔진 최적화(SEO)에 유리한 환경을 제공합니다. 서버 사이드 렌더링은 서버에서 페이지를 그리고 클라이언트에 전달하는 방식으로 작동합니다.
-
클라이언트 사이드 라우팅: 내비게이션을 위한 클라이언트 사이드 라우팅을 지원합니다. 페이지 간 전환 시 전체 페이지를 새로 로드하지 않고 필요한 부분만 업데이트하여 사용자 경험을 향상시킵니다.
-
자동 코드 분할 (Automatic Code Splitting): Next.js는 페이지 간 코드 분할을 자동으로 처리하여 필요한 코드만 클라이언트로 전송하게 함으로써 초기 로딩 시간을 최적화합니다.
-
모듈 시스템과 플러그인 지원: Next.js는 기본적으로 모듈 시스템을 지원하며, 다양한 플러그인을 통해 기능을 확장할 수 있습니다. 예를 들어, 이미지 최적화, 스타일 지원, 데이터 fetching 등을 위한 플러그인을 사용할 수 있습니다.
-
스태틱 파일 서빙 및 내장 API: 정적 파일들을 쉽게 서빙하고, 서버리스 함수 (Serverless Functions)를 통해 API 엔드포인트를 만들 수 있습니다.
-
TypeScript 지원: Next.js는 TypeScript를 기본적으로 지원하며, TypeScript를 사용하여 타입 안정성을 확보할 수 있습니다.
npx create-next-app@latest
gsap 설치 : npm install gsap
sass 설치 : npm install sass
lenis 설치 : npm install @studio-freight/lenis
Vercel은 클라우드 기반의 호스팅 및 배포 플랫폼으로, 웹 애플리케이션 및 정적 웹사이트를 쉽게 배포하고 관리할 수 있도록 도와주는 서비스입니다.
[vercel 홈페이지] (https://vercel.com/)
git 아이디 연동 후 프로젝트 생성
https://vue-project2023.vercel.app/https://next-project2023.vercel.app/