728x90 Next.js4 Next.js 튜토리얼 - ch5. 페이지 간 네비게이팅 Learn Next.js 튜토리얼 https://nextjs.org/learn/dashboard-app/getting-startedNext.js 튜토리얼 - ch5. 페이지 간 네비게이팅Next.js는 컴포넌트를 사용하여 불필요한 자원 낭비 혹은 네트워크 요청을 하지 않음으로써 네비게이션 최적화를 한다.Next.js의 컴포넌트의 특장점Client-side navigating링크 클릭 시 전체 페이지를 새로 로드하지 않고 JavaScript로 클라이언트 사이드 네비게이팅을 하게 되어 네트워크 비용을 줄일 수 있다. 부분적으로는 SSR을 하게 되지만, 전체 페이지를 새로 렌더링 하지 않기 때문에 사용자 경험을 향상시키고 불필요한 네트워크 요청을 줄여주는 장점이 있다.자동 code-splitting과 pre.. 2024. 11. 18. Next.js 튜토리얼 - ch4. 레이아웃과 페이지 생성하기 Learn Next.js 튜토리얼 https://nextjs.org/learn/dashboard-app/getting-startedNext.js 튜토리얼 - ch4. 레이아웃과 페이지 생성하기Next.js App RouterNext.js 13버전부터 앱 라우터를 제공한다. 이전에는 /pages 디렉토리 하위에 경로 설정을 통해 라우팅을 했었지만,13버전부터는 /app 디렉토리 하위에 경로 설정을 통한 파일 시스템 기반 라우팅을 하게 된다. URL의 경로와 파일 경로가 일치하게 되는 것이다.다음은 예시이다.애플리케이션 실행 시 localhost:3000 번으로 호스팅 된다고 가정하자.localhost:3000/dashboard 경로에서 보여지는 페이지= /app/dashboard/page.jsxlocalh.. 2024. 11. 18. Next.js 튜토리얼 - ch3. 폰트 및 이미지 최적화 Learn Next.js 튜토리얼 https://nextjs.org/learn/dashboard-app/getting-startedNext.js 튜토리얼 - ch3. 폰트 및 이미지 최적화Cumulative Layout Shift (CLS) https://vercel.com/blog/how-core-web-vitals-affect-seo Layout Shift는 웹 페이지가 로딩되는 동안 페이지 콘텐츠의 예상치 못한 이동을 나타내는 용어이다. 이는 페이지 안정성을 낮추고 사용자 경험을 저하시킬 수 있다. 또한 layout shift가 자주 발생하는 웹 페이지는 낮은 구글 페이지 랭크를 갖게 된다.웹 폰트 혹은 가로, 세로가 설정되지 않은 이미지는 layout shift를 발생시키는 요인이 될 수 있기 때.. 2024. 11. 18. Next.js 튜토리얼 - ch1 ~ 2. 프로젝트 기본 설정 Learn Next.js 튜토리얼 https://nextjs.org/learn/dashboard-app/getting-startedNext.js 튜토리얼 - ch1 ~ 2. 프로젝트 기본 설정프로젝트 받기npm install -g pnpm // 패키지 매니저로 pnpm 설치해 사용. 더 빠르고 효율적임npx create-next-app@latest nextjs-dashboard --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm// next 프로젝트 생성 명령어. --example 옵션 뒤에 기존 프로젝트의 깃허브 주소를 주어서 clone 해옴.cd nextjs-dashboard // .. 2024. 11. 18. 이전 1 다음 728x90