Next.js 썸네일형 리스트형 Next.js 12-1 Configuring TypeScript Next.js는 React 애플리케이션 구축을 위한 TypeScript 우선 개발 경험을 제공한다. 필요한 패키지를 자동으로 설치하고 적절한 설정을 구성하기 위한 TypeScript 지원이 내장되어 있다. 새 프로젝트 create-next-app이 이제 기본적으로 TypeScript와 함께 제공된다. npx create-next-app@latest 기존 프로젝트 파일 이름을 .ts / .tsx로 변경하여 TypeScript를 프로젝트에 추가한다. 다음 개발 및 다음 빌드를 실행하여 필요한 종속성을 자동으로 설치하고 권장 구성 옵션으로 tsconfig.json 파일을 추가한다. 타입스크립트 플러그인 Next.js에는 VSCode 및 기타 코드 편집기에서 고급 유형 검사 및 자동 완성에 사용할 수 있는 사용.. 더보기 Next.js 9-8 OpenTelemetry Observability는 Next.js 앱의 동작과 성능을 이해하고 최적화하는 데 매우 중요하다. 애플리케이션이 더욱 복잡해짐에 따라 발생할 수 있는 문제를 식별하고 진단하는 것이 점점 어려워진다. 로깅 및 메트릭과 같은 Observability 도구를 활용하여 개발자는 애플리케이션 동작에 대한 통찰력을 얻고 최적화 영역을 식별할 수 있다. Observability를 통해 개발자는 문제가 심각해지기 전에 문제를 사전에 해결하고 더 나은 사용자 경험을 제공할 수 있다. 따라서 성능을 개선하고 리소스를 최적화하며 사용자 경험을 향상시키기 위해 Next.js 애플리케이션에서 observability를 사용하는 것이 좋다. 앱 계측에 OpenTelemetry를 사용하는 것이 좋다. 코드를 변경하지 않고 obs.. 더보기 Next.js 9-7 Lazy Loading Next.js의 Lazy Loading은 경로 렌더링하는 데 필요한 JavaScript의 양을 줄임으로써 애플리케이션의 초기 로딩 선능을 개선하는 데 도움이 된다. 이를 통해 클라이언트 컴포넌트 및 가져온 라이브러리의 로드를 연기하고 필요할 때만 클라이언트 번들에 포함할 수 있다. 예를 들어 사용자가 모달을 클릭하여 열 때까지 모달 로드를 연기할 수 있다. Next.js에서 Lazy Loading을 구현할 수 있는 방법에는 두 가지가 있다. next/dynamic과 함께 동적 Import 사용하기 Suspense와 함께 React.lazy() 사용하기 기본적으로 서버 컴포넌트는 자동으로 코드 분할되며 스트리밍을 사용하여 서버에서 클라이언트로 UI 조각을 점진적으로 보낼 수 있다. 지연 로딩은 클라이언트 .. 더보기 Next.js 9-6 Static Assets Next.js는 루트 디렉토리의 public이라는 폴더에서 이미지와 같은 정적 파일을 제공할 수 있다. 그러면 기본 URL(/)에서 시작하는 코드에서 public 내부의 파일을 참조할 수 있다. 예를 들어 public 안에 me.png를 추가하면 다음 코드가 이미지에 액세스 한다. // Avatar.js import image from 'next/image' export function Avatar() { return } robots.txt, favicon.ico 등과 같은 정적 메타데이터 파일의 경우 앱 폴더 내의 특수 메타데이터 파일을 사용해야 한다. 디렉토리의 이름은 public이어야 한다. 이름이 변경될 수 없으며 정적 자산을 제공하는 데 사용되는 유일한 디렉토리이다. 빌드 시 공개 디렉토리에 있.. 더보기 Next.js 9-5 Metadata Next.js에는 향상된 SEO 및 웹 공유 가능성을 위해 애플리케이션 메타데이터(예: HTML 헤드 요소 내의 메타 및 링크 태그)를 정의하는 데 사용할 수 있는 메타데이터 API가 있다. 애플리케이션에 메타데이터를 추가할 수 있는 두 가지 방법이 있다. Config-based Metadata layout.js 또는 pages.js 파일에서 정적 메타데이터 개체 또는 동적 generateMetadata 함수를 내보낸다. File-based Metadata 경로 세그먼트에 정적 또는 동적으로 생성된 특수 파일을 추가한다. 이 두 가지 옵션을 모두 사용하면 Next.js가 페이지에 대한 관련 요소를 자동으로 생성한다. ImageResponse 생성자를 사용하여 동적 OG 이미지를 생성할 수도 있다. Sta.. 더보기 Next.js 9-4 Script Optimization Layout Scripts 여러 경로에 대한 서드파티 스크립트를 로드하려면 next/script를 가져와 레이아웃 컴포넌트에 직접 스크립트를 포함한다. // app/dashboard/layout.tsx import Script from 'next/script'; export default function DashboardLayout({ children, }: { children: React.ReactNode; }) { return ( {children} 또는 dangerlySetInnerHTML 속성을 사용하면 이렇다. Next.js가 스크립트를 추적하고 최적화하려면 인라인 스크립트에 id 속성을 할당하면 된다. Executing Additional Code 특정 이벤트가 발생한 후 추가 코드를 실행하기.. 더보기 Next.js 9-3 Font Optimization next/font는 자동으로 글꼴(사용자 지정 글꼴 포함)을 최적화하고 개인 정보 보호 및 성능 향상을 위해 외부 네트워크 요청을 제거한다. next/font에는 모든 글꼴 파일에 대한 자동 자체 호스팅이 내장되어 있다. 즉, 사용된 기본 CSS 크기 조정 속성 덕분에 레이아웃 이동 없이 웹 글꼴을 최적으로 로드할 수 있다. 이 새로운 글꼴 시스템을 사용하면 성능과 개인 정보 보호를 염두에 두고 모든 Google 글꼴을 편리하게 사용할 수 있다. CSS 및 글꼴 파일은 빌드 시 다운로드되며 나머지 정적 자산과 함께 자체 호스팅된다. 브라우저에서 Google로 요청을 보내지 않는다. Google Fonts 모든 Google 글꼴을 자동으로 자체 호스팅한다. 글꼴은 배포에 포함되며 배포와 동일한 도메인에서 .. 더보기 Next.js 11-13 Routing Internationalization Next.js를 사용하면 여러 언어를 지원하도록 콘텐츠의 라우팅 및 렌더링을 구성할 수 있다. 사이트를 다양한 로케일에 맞게 만드는 것은 번역된 콘텐츠(현지화) 및 국제화된 경로를 포함한다. Terminology 로케일이란 언어 및 형식 기본 설정 집합에 대한 식별자이다. 여기에는 일반적으로 사용자가 선호하는 언어와 지역이 포함될 수 있다. en-US 미국에서 사용되는 영어 nl-NL 네델란드에서 사용되는 네델란드어 nl 네델란드어, 특정 지역 없음 Routing Overview 브라우저에서 사용자의 언어 기본 설정을 사용하여 사용할 로케일을 선택하는 것이 좋다. 기본 언어를 변경하면 애플리케이션에 대한 수신 Accept-Language 헤더가 수정된다. 예를 들어 다음 라이브러리를 사용하면 들어오는 요.. 더보기 이전 1 2 3 4 5 6 다음
