Je개발 일지

Route Handlers와 Middleware Route Handlers Route Handlers를 사용하면 Web Request와 Response API를 사용하여 특정 라우트에 대한 커스텀 요청 핸들러를 생성할 수 있습니다. 🔍 알아두면 좋은 점 Route Handlers는 app 디렉토리 내에서만 사용할 수 있습니다. 이들은 pages 디렉토리 내의 API Routes와 동등한 기능을 제공하므로 API Routes와 Route Handlers를 함께 사용할 필요가 없습니다. 규칙 Route Handlers는 app 디렉토리 내의 route.js|ts 파일에서 정의됩니다: export async function GET(request: Req..

메타데이터와 OG 이미지 메타데이터 API는 SEO 개선과 웹 공유 기능을 위해 애플리케이션 메타데이터를 정의하는 데 사용할 수 있으며, 다음을 포함합니다: 정적 metadata 객체 동적 generateMetadata 함수 정적 또는 동적으로 생성되는 파비콘과 OG 이미지를 추가하는 데 사용할 수 있는 특별한 파일 규칙 위의 모든 옵션을 통해 Next.js는 자동으로 페이지에 대한 관련 태그를 생성하며, 브라우저의 개발자 도구에서 확인할 수 있습니다. 💡 실무 팁 메타데이터 설정은 SEO에 매우 중요합니다. 특히 블로그나 콘텐츠 사이트의 경우 각 페이지마다 고유한 제목과 설명을 설정하는 것이 검색 엔진 최적화에 큰 도움이 됩니다. ..

폰트 최적화 next/font 모듈은 폰트를 자동으로 최적화하고 개선된 프라이버시와 성능을 위해 외부 네트워크 요청을 제거합니다. 모든 폰트 파일에 대한 내장 셀프 호스팅을 포함합니다. 이는 레이아웃 시프트 없이 웹 폰트를 최적으로 로드할 수 있다는 것을 의미합니다. next/font 사용을 시작하려면 next/font/local 또는 next/font/google에서 임포트하고, 적절한 옵션으로 함수로 호출한 다음, 폰트를 적용하려는 요소의 className을 설정하세요. 예를 들어: import { Geist } from 'next/font/google'const geist = Geist({ subsets: ['latin'],})export default function Layout({ ch..

이미지 최적화 Next.js 컴포넌트는 HTML 요소를 확장하여 다음과 같은 기능을 제공합니다: 크기 최적화: WebP와 같은 최신 이미지 형식을 사용하여 각 디바이스에 맞는 크기의 이미지를 자동으로 제공합니다. 시각적 안정성: 이미지 로딩 시 레이아웃 시프트를 자동으로 방지합니다. 빠른 페이지 로드: 네이티브 브라우저 지연 로딩을 사용하여 뷰포트에 들어올 때만 이미지를 로드하며, 선택적으로 블러 업 플레이스홀더를 제공합니다. 자산 유연성: 원격 서버에 저장된 이미지라도 온디맨드로 크기를 조정할 수 있습니다. 사용을 시작하려면 next/image에서 임포트하고 컴포넌트 내에서 렌더링하세요. import Image from 'next/image'export defau..

CSS Next.js는 CSS를 사용하여 애플리케이션을 스타일링하는 여러 가지 방법을 제공합니다: CSS 모듈 전역 CSS 외부 스타일시트 Tailwind CSS Sass CSS-in-JS CSS 모듈 CSS 모듈은 고유한 클래스 이름을 생성하여 CSS를 로컬 범위로 지정합니다. 이를 통해 이름 충돌을 걱정하지 않고 서로 다른 파일에서 동일한 클래스를 사용할 수 있습니다. CSS 모듈 사용을 시작하려면 .module.css 확장자로 새 파일을 만들고 app 디렉토리 내의 모든 컴포넌트로 가져오세요: /* app/blog/blog.module.css */.blog { padding: 24px;} // app/blog/page.tsximport styles..

에러 처리 에러는 두 가지 범주로 나눌 수 있습니다: 예상 에러와 포착되지 않은 예외입니다. 이 페이지에서는 Next.js 애플리케이션에서 이러한 에러들을 어떻게 처리하는지 안내합니다. 예상 에러 처리 예상 에러는 서버 측 폼 검증이나 실패한 요청과 같이 애플리케이션의 정상적인 작동 중에 발생할 수 있는 에러입니다. 이러한 에러는 명시적으로 처리되어 클라이언트에 반환되어야 합니다. 서버 함수 서버 함수에서 예상 에러를 처리하기 위해 useActionState 훅을 사용할 수 있습니다. 이러한 에러의 경우, try/catch 블록을 사용하고 에러를 던지는 것을 피하세요. 대신 예상 에러를 반환값으로 모델링하세요. 'use server'export async function createPost(..

캐싱과 재검증 캐싱은 데이터 패칭 및 기타 계산 결과를 저장하여 동일한 데이터에 대한 향후 요청을 다시 작업을 수행하지 않고도 더 빠르게 처리할 수 있는 기술입니다. 재검증을 통해서는 전체 애플리케이션을 다시 빌드하지 않고도 캐시 항목을 업데이트할 수 있습니다. Next.js는 캐싱과 재검증을 처리하기 위한 몇 가지 API를 제공합니다. 이 가이드에서는 언제, 어떻게 사용하는지를 안내합니다. fetch unstable_cache revalidatePath revalidateTag fetch 기본적으로 fetch 요청은 캐시되지 않습니다. cache 옵션을 'force-cache'로 설정하여 개별 요청을 캐시할 수 있습니다. export default async fun..

데이터 업데이트 React의 서버 함수(Server Functions)를 사용하여 Next.js에서 데이터를 업데이트할 수 있습니다. 이 페이지에서는 서버 함수를 생성하고 호출하는 방법을 설명합니다. 서버 함수 생성하기 use server 지시어를 사용하여 서버 함수를 정의할 수 있습니다. 비동기 함수의 상단에 지시어를 배치하여 해당 함수를 서버 함수로 표시하거나, 별도 파일의 상단에 배치하여 해당 파일의 모든 내보내기를 서버 함수로 표시할 수 있습니다. export async function createPost(formData: FormData) { 'use server' const title = formData.get('title') const content = formData.get('..

데이터 패칭이 페이지에서는 서버 및 클라이언트 컴포넌트에서 데이터를 가져오는 방법과 데이터에 의존하는 컴포넌트를 스트리밍하는 방법을 안내합니다.데이터 패칭서버 컴포넌트서버 컴포넌트에서는 다음을 사용하여 데이터를 가져올 수 있습니다:fetch APIORM 또는 데이터베이스fetch API 사용하기fetch API로 데이터를 가져오려면 컴포넌트를 비동기 함수로 만들고 fetch 호출을 await하세요. 예시:export default async function Page() { const data = await fetch('https://api.vercel.app/blog') const posts = await data.json() return ( {posts.map((post) => (..

서버 및 클라이언트 컴포넌트기본적으로 레이아웃과 페이지는 서버 컴포넌트로, 서버에서 데이터를 가져와 UI의 일부를 렌더링하고, 선택적으로 결과를 캐시하며, 클라이언트로 스트리밍할 수 있습니다. 상호작용이나 브라우저 API가 필요한 경우 클라이언트 컴포넌트를 사용하여 기능을 레이어링할 수 있습니다.이 페이지에서는 Next.js에서 서버 및 클라이언트 컴포넌트가 어떻게 작동하는지, 언제 사용해야 하는지, 그리고 애플리케이션에서 이들을 함께 구성하는 방법에 대한 예시를 설명합니다.서버 및 클라이언트 컴포넌트는 언제 사용해야 할까요?클라이언트와 서버 환경은 서로 다른 기능을 가지고 있습니다. 서버 및 클라이언트 컴포넌트를 사용하면 사용 사례에 따라 각 환경에서 로직을 실행할 수 있습니다.다음과 같은 경우에 클라..