기본 사용법Next.js에서는 이미지 최적화를 위해 next/image컴포넌트를 사용한다.import Image from 'next/image'src: 이미지 소스 URLwidth 및 height:필수 속석으로, 이미지의 원본 크기를 지정레이아웃 시프트 방지 및 적절한 공간 확보에 사용반응형 이미지 설정 방법alt: 접근성을 위한 대체 텍스트quality:선택적 속성으로, 1-100 사이의 값 지정(기본값 75)WebP 등으로 변환 시 이미지 품질 조절에 사용 Next.js는 이 정보를 바탕으로 자동 WebP 변환, 레이지 로딩, 디바이스 크기에 맞는 이미지 제공 등의 최적화를 수행한다. 외부 이미지 사용외부 이미지를 사용할 경우, next.config.mjs에 다음과 같이 설정해줘야만 해당 이미지 주소..

Parallel RouteParallel Route(병렬 라우트)는 하나의 화면 안에 여러 페이지 컴포넌트를 병렬로 렌더링할 수 있게 해주는 기능이다.소셜 미디어 서비스나 관리자 대시보드와 같은 복잡한 구조의 서비스 구축에 특히 유용하다.여러 페이지 컴포넌트를 동시에 렌더링슬롯(Slot)을 사용하여 구현복잡한 레이아웃 구성에 적합 Slot슬롯은 병렬로 렌더링 될 페이지 컴포넌트를 보관하는 폴더이다.슬롯 이름은 @로 시작한다.슬롯 안의 페이지 컴포넌트는 자동으로 부모 레이아웃 컴포넌트에 props로 전달된다.폴더 구조 . ├── app │ └── parallel │ ├── @sidebar // slot 폴더 │ │ └── page.tsx │ ..

서버 액션이란?서버 액션은 Next.js에서 제공하는 기능으로, 브라우저에서 직접 호출할 수 있는 서버 측 비동기 함수이다. 이를 통해 별도의 API 엔드포인트를 만들지 않고도 클라이언트에서 서버 측 로직을 실행할 수 있다.서버 액션을 사용하려면 함수 내부에 "use server" 지시어를 추가하면 된다.export default function Page() { const saveName = async (formData: FormData) => { "use server"; const name = formData.get("name"); await sql`INSERT INTO Names (name) VALUES (${name})`; }; return ( 제출 ..