App Router: Optimizing Fonts and Images글꼴을 최적화 해야하는 이유프로젝트에서 사용자 지정 글꼴을 사용하면 글꼴파일 로드시 성능에 영향을 미칠 수 있다.ex) 시스템 글꼴로 랜더링 후 사용자 글꼴로 텍스트가 렌더링 됨에 따라 텍스트 크기, 간격 등이 변경되어 주변 요소에 영향을 미친다.NextJs는 빌드시 글꼴 파일을 다운로드해 다른 정적 자산과 함께 호스팅한다.즉 next/font/폰트명 으로 폰트를 다운받고, 정적 자산으로 번들링 된다.따라서 사용자가 애플리케이션에 방문 시 성능에 영향을 줄 수 있는 네트워크 요청이 없다.기본 글꼴 추가/app/ui 폴더에 fonts.ts 를 만듭니다.import { Inter } from 'next/font/google'; export..

App Router: Getting Started프로젝트 만들기프로젝트를 만들기 전에 앞서 npm 또는 yarn 패키지 관리자가 없다면 pnpm을 설치합니다.프로젝트를 보관하려는 폴더로 이동 후 아래 명령어로 예제 프로젝트를 설치합니다.npx create-next-app@latest nextjs-dashboard --example "" --use-pnpmcd nextjs-dashboard폴더 구조/app주 작업 공간으로, 애플리케이션에 필요한 모든 경로, 구성 요소, 논리가 포함되어 있습니다./app/lib재사용 가능한 유틸리티 함수, 데이터 가져오기 함수 등 애플리케이션에서 사용되는 함수가 포함되어 있습니다./app/ui카드, 테이블, 양식 등 애플리케이션의 모든 UI 구성 요소를 포함합니다./publ..

본 학습 과정에서는 풀스택 웹 애플리케이션을 빌드하며 Next.js의 주요 기능을 배웁니다.다음과 같은 회계 대시보드를 구축합니다.공개 홈페이지로그인 페이지인증이 필요한 페이지사용자의 송장 CRUD개요Styling Next.js에서 애플리케이션의 스타일을 지정하는 다양한 방법Optimizations 이미지, 링크, 글꼴을 최적화하는 방법Routing 파일 시스템 라우팅을 사용하여 중첩된 레이아웃과 페이지를 만드는 방법Data Fetching Vercel에 Postgres 데이터베이스를 설정하는 방법과 가져오기 및 스트리밍을 위한 모범 사례.Search and Pagination URL 검색 매개변수를 사용하여 검색 및 페이지 번호를 구현하는 방법.Mutating Data React Server Actio..