Next.js에는 SEO 및 웹 공유성을 향상시키기 위해 애플리케이션 메타데이터를 정의하는 데 사용할 수 있는 Metadata API가 있다. 이를 통해 HTML head 요소 내에서 meta 및 link 태그를 추가할 수 있다. 정적 Meta Data layout.js 또는 정적 page.js 파일에서 Metadata 객체를 내보낸다. //layout.tsx export const metadata: Metadata = { title: 'NEXT MALL', description: 'X2BEE MALL FO by Plateer', icons: { icon: '/favicon.ico', }, }; 동적 Meta Data generateMetadata 함수를 사용하여 동적 Meta Data를 구성할 수 있다..

서버 액션에 try/catch 추가 먼저 오류를 적절하게 처리할 수 있도록 JavaScript의 try/catch 문을 서버 액션에 추가해 보자. 이를 수행하는 방법을 알고 있다면 서버 액션을 업데이트하는 데 몇 분 정도 시간을 투자하거나 아래 코드를 복사할 수 있다. /app/lib/actions.ts export async function createInvoice(formData: FormData) { const { customerId, amount, status } = CreateInvoice.parse({ customerId: formData.get('customerId'), amount: formData.get('amount'), status: formData.get('status'), }); ..

Parallel Routes Parallel Routes는 동시에 또는 조건부로 동일한 레이아웃 내에서 하나 이상의 페이지를 렌더링할 수 있게 해준다. 이는 앱의 매우 동적인 섹션인 대시보드나 소셜 사이트의 피드와 같은 경우에 유용하다. 예를 들어, 대시보드를 고려해보면 병렬 루트를 사용하여 팀 및 분석 페이지를 동시에 렌더링할 수 있다. Parallel Routes는 명명된 슬롯을 사용하여 생성됩니다. 슬롯은 @폴더 관례로 정의된다. 아래 예시는 @team 및 @user 두 개의 슬롯을 정의한다. 슬롯은 공유 부모 레이아웃에 속성(props)으로 전달된다. 위의 예에서는 app/layout.js의 컴포넌트가 이제 @team 및 @user 슬롯 속성을 받아들이고, 이를 자식 속성(children prop..

프로젝트 루트 디렉터리에 middleware.ts (또는 .js) 파일을 사용하여 미들웨어를 정의할 수 있다. 예를 들어, pages나 app과 같은 수준에 두거나 적용 가능한 경우 src 내부에 위치시킬 수 있다. Matching Paths 미들웨어는 프로젝트의 모든 라우트에 대해 호출된다. 실행 순서 next.config.js에서 정의된 헤더 next.config.js에서 정의된 redirects 미들웨어 (rewrites, redirects 등) next.config.js에서 정의된 beforeFiles (rewrites) 파일 시스템 routes (public/, _next/static/, pages/, app/ 등) next.config.js에서 정의된 afterFiles (리라이트) 동적 라우..

Next.js는 여러 언어를 지원하기 위해 라우팅 및 콘텐츠 렌더링을 구성할 수 있게 해준다. 여러 locale에 대응하는 사이트를 만들기 위해서는 번역된 콘텐츠(localization)와 internationalized routes가 포함된다. Middleware (/src/middleware.ts) 미들웨어는 클라이언트의 요청에서 locale 을 추출하고, 이에 따라 적절한 리디렉션 또는 리라이트를 수행한다. 만약 클라이언트가 /about에 대한 요청을 하고 locale이 en으로 설정되어 있다면, 미들웨어는 이를 /en/about으로 리디렉션하거나 리라이트할 것이다. 이러한 처리를 통해 사용자는 적절한 언어로 번역된 페이지로 리디렉션되거나 리라이트되어 효과적으로 국제화된 콘텐츠를 제공받을 수 있다...

Dynamic Routes Dynamic Routes는 관행적으로 [slug]라는 이름으로 많은 상품명에 따라 동일한 레이아웃을 가져갈 때 사용됩니다. 반드시 slug라는 이름을 사용해야하는 것은 아니며, 가독성을 위해 아래는 categoryname이라는 이름으로 예시를 작성하였습니다. 다음 폴더 구조에서의 예시 └── category └── [categoryname] └── page.tsx page.tsx import React from "react"; const Page = ({ params }: { params: { categoryname: string } }) => { return ( {params.categoryname} ); }; export default Page; 브라우저에 http://l..