next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 ESLint // package.json에 추가 "scripts": { "lint": "next lint" } 실행 npm run lint3가지 옵션 Strict: 더 엄격하게{ "extends": "next/core-web-vitals" } Base : 기본구성{ "extends": "next" } Cancel: 구성하지 않기 ESLint 구성 기본설정 그대로 쓰셈 ESLint 플러그인 기본설정 그대로 쓰셈 맞춤설정 모노레포와 같은 경우는 아래처럼 위치 찾을 수 있게 // .eslintrc { "extends": "next", "settings": { "next": { "rootDir": "packages/my-app/" } } } 맞춤..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 TypeScript 새 프로젝트 기본이 타입스크립트와 함께 제공됨 기존 프로젝트 js, jsx를 ts, tsx로 변경하고 next dev 랑 next build 실행하면 자동으로 tsconfig.json 생김 타입스크립트 플러그인 자동으로 활성화. 안뜨면 다음과 같이 명령 팔레트 열기( Ctrl/⌘+ Shift+ P) "TypeScript: TypeScript 버전 선택" 검색 "Workspace 버전 사용" 선택 플러그인 기능 세그먼트 구성 옵션 에 잘못된 값이 전달되면 경고가 표시됩니다. 사용 가능한 옵션 및 상황에 맞는 문서를 표시합니다. use client지시문이 올바르게 사용되었는지 확인합니다 . 클라이언트 후크(예: useSta..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Instrumentation 검색해서 나온 내용 로그, 사용데이터 수집분석, 성능 모니터링, 오류추적 등을 함 Sentry, Google Analytics등을 많이 사용함. 문서 설명 실험적 기능 /instrumentation.ts 파일에서 register라는 이름의 함수를 내보내면 새 Next.js 서버 인스턴스가 부트스트랩될 때마다 해당 함수가 호출됩니다. register 함수가 배포되면 각 콜드 부팅 시 호출됩니다(단, 각 환경에서 정확히 한 번만). 때로는 부작용이 발생할 수 있으므로 코드에서 파일을 임포트하는 것이 유용할 수 있습니다. 예를 들어 전역 변수 집합을 정의하는 파일을 가져오되 코드에서 가져온 파일을 명시적으로 사용하지..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 OpenTelemetry 분산 시스템 모니터링 도구 OpenTelemetry는 분산 애플리케이션의 모니터링을 위한 오픈 소스 프로젝트입니다. OpenTelemetry는 클라우드 환경에서 실행되는 여러 서비스와 컴포넌트를 추적하고 측정하기 위한 표준화된 방법을 제공합니다. 이는 개발자들이 애플리케이션의 성능, 트랜잭션 추적, 로깅 등을 추적하고 이해하는 데 도움을 줍니다. OpenTelemetry는 분산 시스템의 복잡성을 관리하기 위해 다양한 언어 및 런타임을 지원하는 범용적인 API와 SDK를 제공합니다. 이를 통해 개발자들은 애플리케이션에서 발생하는 이벤트 및 상황을 추적하고 관찰할 수 있습니다. OpenTelemetry는 애플리케이션의..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Analytics 대충 vercel 속도분석기 쓰라는 내용. https://vercel.com/analytics

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Lazy Loading 초기 로딩 개선 목적. 필요할때 로딩하게 구현 next/dynamic 클라이언트 컴포넌트 가져오기 'use client'; import { useState } from 'react'; import dynamic from 'next/dynamic'; // Client Components: const ComponentA = dynamic(() => import('../components/A')); const ComponentB = dynamic(() => import('../components/B')); const ComponentC = dynamic(() => import('../components/C'), { ssr..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Static Assets public 디렉토리에 정적 파일을 넣고 제공할 수 있음 import Image from 'next/image'; function Avatar() { return ; } export default Avatar; 위 예제에서 me.png는 /public/me.png 에 위치 정적자산은 s3나 cdn등을 사용하여 별도 분리해주는 것이 좋음. 업로드 파일도 마찬가지

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Metadata SEO를 위한 메타 데이터 API 구성 기반 메타데이터: 정적 메타데이터 객체 또는 동적 생성 메타데이터 함수를 layout.js 또는 page.js 파일로 내보냅니다. 파일 기반 메타데이터: 정적 또는 동적으로 생성된 특수 파일을 경로 세그먼트에 추가합니다. 정적 메타데이터 // layout.tsx / page.tsx import { Metadata } from 'next'; export const metadata: Metadata = { title: '...', description: '...', }; export default function Page() {} 동적 메터데이터 // app/products/[id]/pa..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Script Optimization 레이아웃 스크립트 // next/script 를 가져오고 구성요소에 직접 포함 import Script from 'next/script'; export default function DashboardLayout({ children, }: { children: React.ReactNode; }) { return ( {children} 또는 dangerouslySetInnerHTML 속성 사용 Script에 id 속성이 있어야 nextjs가 추적할 수 있음 추가 코드 실행 onLoad: 스크립트 로딩이 완료된 후 코드를 실행 onReady: 스크립트 로딩이 완료된 후 컴포넌트가 마운트될 때마다 코드를 실행 ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Server Actions React Actions 위에 구축된 알파 기능. 서버측 데이터 변형, 클라이언트 측 코드 감소 및 향상된 양식을 가능하게 함 // app/add-to-cart.js import { cookies } from 'next/headers'; export default function AddToCart({ productId }) { async function addItem(data) { 'use server'; const cartId = cookies().get('cartId')?.value; await saveToDb({ cartId, data }); } return ( Add to Cart ); } Rule 아래처..