Next.js로 만드는 대표기업 서비스

Next.js의 layout.tsx 개념을
파일 트리 + 코드 예시로 설명해줘.
중첩 레이아웃의 동작 방식도.

Vercel 사이트 같은 다중 섹션 레이아웃을 설계해줘.
루트 레이아웃 + 마케팅·docs·blog 그룹별 레이아웃 +
MDX로 작성하는 docs 사이트.

Vercel 수준 Edge 아키텍처를 설계해줘.
포함: Edge Functions / 글로벌 KV / ISR + 온디맨드 재검증 /
Split testing / Web Vitals 모니터링.

dynamic import로 컴포넌트를 지연 로드하는 예시를
Next.js에서 어떻게 작성하는지 코드로 보여줘.

TikTok 같은 비디오 피드의 SSR 페이지를 설계해줘.
첫 비디오는 SSR로 즉시 / 다음 비디오는 client에서 lazy +
Suspense로 점진적 표시.

TikTok 수준 비디오 플랫폼 Next.js 아키텍처를 설계해줘.
포함: HLS 스트리밍 / CDN 멀티 리전 /
IntersectionObserver 자동 재생 / 데이터 절약 모드 / SEO.

Next.js Image 컴포넌트가 일반 img 태그보다
어떤 점이 좋은지 비교 + 코드 예시로 보여줘.

Hulu 같은 미디어 카드 그리드를 설계해줘.
Image priority / sizes / placeholder='blur' +
무한 스크롤 + 키보드 네비게이션.

Hulu 수준 미디어 사이트 성능을 설계해줘.
포함: Edge Cache(CDN) / 이미지 변환(WebP/AVIF) /
prefetch 전략 / Web Vitals 1.5초 LCP 달성.

Server Component에서 직접 DB를 조회하는
예시를 보여줘. async 컴포넌트 + Drizzle ORM 사용.

Notion 같은 문서 편집 페이지를 설계해줘.
초기 로드는 Server Component / 편집은 Client +
optimistic update + 자동 저장(debounce).

Notion 수준 협업 에디터의 Next.js 아키텍처를 설계해줘.
포함: Server Components 초기 로드 / SSE/WebSocket 실시간 /
CRDT 문서 동기화 / 권한 / 오프라인 큐.

Next.js의 metadata API로 동적 SEO를 설정하는
방법을 코드 예시로 보여줘. Open Graph 포함.

당근 같은 상품 상세 페이지의 SSR + SEO를 설계해줘.
동적 metadata + Open Graph 이미지 +
structured data(JSON-LD) + 모바일 뷰포트.

당근 수준 모바일 웹 성능 + SEO를 설계해줘.
포함: SSR + 캐시 레이어 / 동적 메타데이터 /
Lighthouse 95+ 점수 / 푸시 알림 / 모바일 네트워크 대응.

// 기업 Next.js 기법 5가지 — 미니 데모

// 1. Vercel: 그룹 레이아웃
// app/(marketing)/layout.tsx — 마케팅 페이지 공통
// app/(docs)/layout.tsx — 문서 페이지 공통
// app/(app)/layout.tsx — 인증된 앱 공통

// 2. TikTok: dynamic import + Suspense
import dynamic from 'next/dynamic';
import { Suspense } from 'react';

const VideoPlayer = dynamic(() => import('./VideoPlayer'), {
  loading: () => <div>Player 로딩...</div>,
  ssr: false,
});

export default function FeedPage() {
  return (
    <Suspense fallback={<div>피드 로딩...</div>}>
      <VideoPlayer />
    </Suspense>
  );
}

// 3. Hulu: Image 최적화
import Image from 'next/image';
function MediaCard({ src, title }: { src: string; title: string }) {
  return (
    <Image
      src={src}
      alt={title}
      width={300}
      height={170}
      sizes='(max-width: 768px) 100vw, 300px'
      placeholder='blur'
      blurDataURL='data:image/svg+xml;base64,PHN2Zy...'
      priority={false}
    />
  );
}

// 4. Notion: Server Component + DB 직접 조회
// app/posts/[id]/page.tsx
async function getPost(id: string) {
  // const post = await db.select().from(posts).where(eq(posts.id, id));
  // return post[0];
  return { title: 'Hello', body: 'World' };
}
export default async function PostPage({ params }: { params: { id: string } }) {
  const post = await getPost(params.id);
  return <article><h1>{post.title}</h1><p>{post.body}</p></article>;
}

// 5. 당근: 동적 metadata
import type { Metadata } from 'next';
export async function generateMetadata({ params }: { params: { id: string } }): Promise<Metadata> {
  const product = await getPost(params.id);
  return {
    title: product.title,
    openGraph: {
      title: product.title,
      description: product.body,
      images: [`/api/og?id=${params.id}`],
    },
  };
}