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 (리라이트) 동적 라우..

서버 컴포넌트에서는 상태를 저장하거나 조회하기 어렵기 때문에 redisClient를 제공함. 1. Server Component import { restApi } from '@/lib/common/plugins/restApi'; import { getRedisValue, setRedisValue } from '@/lib/common/plugins/redisClient'; const SearchPage = async () => { const test = { test1: 'test1', test2: '999999', test3: 'weqweqweqwe', }; // 마지막 500의 경우 500초로 아무것도 안넣을 경우 무한으로 저장됨 await setRedisValue('test998877', test, 5..

1번에서 설명한 zustand사용법은 매우 간단하지만 상태를 생성할때는 반복되는 코드를 줄이기 위해서 x2beeStore를 제공하고 있습니다. x2beeStore 사용방법 1.testStore.ts 생성 가장 먼저 store를 다음과 같이 생성함. import x2beeStore from '@/lib/common/plugins/x2beeStore'; export const testState = { test1: '', test2: '', test3: '', }; const useTestStore = x2beeStore('testStore', testState); export default useTestStore; 2.testStore 상태 저장, 조회 'use client'; import useTestSt..