useRouter() Hook을 사용한 클라이언트 사이드 리디렉션사용자가 버튼을 눌렀을 때 특정 페이지로 이동하도록 하고 싶을 때 사용한다.import { useRouter } from 'next/router';export default function Page() { const router = useRouter(); return ( router.push('/dashboard')}> Dashboard );} router.push('/dashboard')를 호출하면 /dashboard 페이지로 클라이언트 사이드에서 이동한다.장점: 사용자가 현재 보고 있는 페이지를 리로드하지 않고 이동 가능.활용 사례: 로그인 후 대시보드로 이동, 특정 버튼 클릭 시 이동 등.   next.co..

Next.js의 Dynamic Routes를 이해하기 쉽게 설명하겠습니다. Dynamic Segments (동적 세그먼트)설명: 경로 일부가 동적으로 변할 수 있도록 설정하는 방식파일명 규칙: 대괄호([ ])로 감싼 파일명 사용예: [id].js, [slug].js폴더 구조pages/ blog/ [slug].js매칭되는 경로/blog/a → slug = 'a'/blog/b → slug = 'b'코드import { useRouter } from 'next/router';export default function BlogPost() { const router = useRouter(); return Post: {router.query.slug};}출력 결과/blog/a → 화면에 Post: a/bl..

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