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 아래처..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Revalidating 특정시간 간격으로 데이터 재검증 업데이트 같은 이벤트를 기반으로 데이터 재검증 background 재검증 fetch('https://...', { next: { revalidate: 60 } }); fetch를 사용하지 않는 경우엔 경로 세그먼트에 설정 // app/page.tsx export const revalidate = 60; on-demand 재검증 헤드리스 cms의 컨텐츠가 생성되거나 업데이트 되는 경우 전자상거래 메타데이터 변경(가격, 설명, 카테고리, 리뷰 등) 의 상황에서 캐시를 수동으로 제거하여 사용할 것 온디맨드 재검증 사용하기 revalidatePath 또는 revalidateTag로 경로 또는..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Caching 요청별로 또는 전체 경로 세그먼트에 대해 데이터 캐싱을 지원함 요청당 캐싱 fetch() 기본적으로 모든 fetch() 요청은 자동으로 캐시되고 중복되거됨 요청이 캐시되지 않는 경우 동적 메서드(next/headers, export const POST 등)가 사용되며 POST 요청(또는 인증이나 cookie 사용) fetchCache revalidate: 0 또는 cache: 'no-store’으로 구성된 fetch cache() // utils/getUser.ts import { cache } from 'react'; export const getUser = cache(async (id: string) => { const ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Fetching async, await in Server Component //app/page.tsx async function getData() { const res = await fetch('https://api.example.com/...'); if (!res.ok) { throw new Error('Failed to fetch data'); } return res.json(); } export default async function Page() { const data = await getData(); return ; } 타입스크립트 오류나면 임시로 /* @ts-expect-error Async Server Component */ ..

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의 Edge and Node.js Runtimes 런타임 차이 일반적인 서버리스(AWS 람다등)와 에지와의 차이점은 엣지가 실행되는 서버가 사용자와 가장 가까운 곳의 IDC를 사용하는 것에 있음. https://www.itworld.co.kr/tags/69957/FaaS/144224 Edge 용량제한이 있어서 next.js에서 실 활용 어려움. Node.js 런타임 일반적 리눅스 환경에서 node.js 설치하여 직접 돌리는 경우 서버리스 Node.js Vercel 등과 같이 별도 설정 없이 개발 코드만 업로드하여 바로 사용