Loading the catalog…
Loading the catalog…
Next.js 공식 튜토리얼(Next.js Learn)을 따라가면서 마주친 경로 설정, 컴포넌트 개념, 그리고 개발 중 발생했던 주요 에러들과 해결 방법을 정리해 둡니다. 1. <AcmeLogo /> 컴포넌트의 정체 Next.js 튜토리얼 예제 프로젝트에 포함된 가상의 서비스 'Acme'의 로고 컴포넌트입니다. app/ui/acme-logo.tsx 파일 내부에 정의되어 있으며, 아이콘( Heroicons )과 폰트( Lusitana ) 스타일이 입혀진 브랜드 요소를 렌더링합니다. 2. 데스크톱 히어로 이미지 추가하기 ( next/image ) 튜토리얼에서 반응형 히어로 이미지를 추가할 때 요구하는 핵심 작업입니다. 작업 내용 /app/page.tsx 파일에서 next/image 를 import하고 주석 위치에 컴포넌트를 배치합니다. import Image from 'next/image'; // ... {/* Add Hero Images Here */} <Image alt="Screenshots of the dashboard project showing desktop version" className="hidden md:block" height="{760}" src="/hero-desktop.png" width="{1000}"/> 주요 속성 정리 src="/hero-desktop.png" : Next.js는 public 폴더를 루트( / )로 바로 서빙합니다. width={1000} , height={760} : 레이아웃 이동(CLS) 현상을 방지하기 위해 원본 비율을 명시합니다. className="hidden md:block" : Tailwind CSS를 이용해 모바일에서는 숨기고( hidden ), 데스크톱 크기( md:block ) 이상에서만 노출시킵니다. 3. [Error] Export lusitana doesn't exist in target module 에러 원인 app/ui/acme-logo.tsx 에서 lusitana 폰트를 가져오려 했으나, 정작 app/ui/fonts.ts 에 해당 폰트가 export되어 있지 않아 발생한 빌드 에러입니다. 해결 방법 app/ui/fonts.ts 파일에 Lusitana 설정을 추가하여 export해 줍니다. import { Inter, Lusitana } from 'next/font/google'; export const inter = Inter({ subsets: ['latin'] }); export const lusitana = Lusitana({ weight: ['400', '700'], subsets: ['latin'], }); 4. [Error] Hydration failed (lang="ko" vs lang="en") 에러 증상 화면에 Hydration failed because the server rendered text didn't match the client 에러가 발생하며, Diff 확인 시 다음과 같이 출력됩니다. + lang="en" - lang="ko" className="translated-ltr" 에러 원인 Next.js(React)가 서버에서 렌더링한 초기 HTML과 클라이언트 브라우저가 첫 렌더링한 DOM 트리가 일치해야 하이드레이션이 정상 완료됩니다. 하지만 크롬 등 브라우저의 웹페이지 자동 번역 기능 이 실행되면서 React가 준비되기 전에 <html> 태그와 내부 텍스트를 강제로 수정해 불일치가 일어난 것입니다. 해결 방법 방법 1 (즉시 해결) : 브라우저 주소창의 Google 번역 아이콘을 눌러 번역을 해제하고 원본 언어(영어)로 전환한 뒤 새로고침( F5 )합니다. 방법 2 (코드 레벨 방지) : 개발 중 번역기 간섭을 방지하려면 app/layout.tsx 의 <html> 태그에 번역 방지 속성을 지정합니다. <html lang="en" translate="no"> ```
What RADAR observed and classified to build this opportunity. It is what the source published, not a verification that the offer is still active.
[Next.js] 공식 튜토리얼 진행 중 마주친 개념 정리 & 트러블슈팅 일지. Next.js 공식 튜토리얼(Next.js Learn)을 따라가면서 마주친 경로 설정, 컴포넌트 개념, 그리고 개발 중 발생했던 주요 에러들과 해결 방법을 정리해 둡니다. 1. 컴포넌트의 정체 Next.js 튜토리얼 예제 프로젝트에 포함된 가상의 서비스 'Acme'의 로고 컴포넌트입니다. app/ui/acme-logo.tsx 파일 내부에 정의되어 있으며, 아이콘( Heroicons )과 폰트( Lusitana ) 스타일이 입혀진 브랜드 요소를 렌더링합니다. 2. 데스크톱 히어로 이미지 추가하기 ( next/image ) 튜토리얼에서 반응형 히어로 이미지를 추가할 때 요구하는 핵심 작업입니다. 작업 내용 /app/page.tsx…