Next.js 16: App Router + TS

"Next.js 16 이 React 19 Server Component 완전 채택. TypeScript 가 자연스럽게 따라."

App Router 구조

Next 16 의 App Router (새 프로젝트의 유일한 router) 가 `app/` 아래 파일-based 라우팅 사용. app/page.tsx 가 root page. app/posts/[id]/page.tsx 가 dynamic route. app/layout.tsx 가 children wrap. 각 파일이 default component (page/layout) 또는 특정 named export (`loading`, `error`, `not-found`) export.

Route segment props 가 자동 타입 붙음

Page 와 layout component 가 router 에서 typed props 받음. export default async function Page({ params, searchParams }: { params: Promise<{ id: string }>; searchParams: Promise<{ q?: string }> }). Next 16 에 `params` 와 `searchParams` 둘 다 async — 읽기 전 `await`. 이게 React 의 더 넓은 async-first 모델의 일부.

데이터 fetching 과 revalidation

Server Component 에선 직접 fetch: const data = await fetch('https://api.example.com/posts').then(r => r.json()). Next 가 자동 cache; ISR-style invalidation 엔 `{ next: { revalidate: 60 } }` 전달. Cache 와 타입 둘 다 TypeScript 통해 옳게 흐름.

Next.js 16 이 관례와 infrastructure 가진 React 19. React 19 의 Server Components + Actions 모델 이해하면 Next.js 가 대부분 너의 길에서 벗어나 있음.

Code

Next.js 16 App Router — page, layout, loading·tsx

// app/posts/[id]/page.tsx
export default async function PostPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;     // Next 16 — params 가 async
  const post = await fetch(`https://api.example.com/posts/${id}`).then((r) => r.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.body }} />
    </article>
  );
}

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// app/posts/loading.tsx — /posts 와 그 children 의 Suspense fallback.
export default function Loading() {
  return <div>Loading posts…</div>;
}

Exercise

/posts listing page 와 /posts/[id] detail page 가진 작은 Next.js 16 앱 setup. 둘 다 mock API (JSONPlaceholder 나 자기 거) 에서 fetch. params 가 타입 붙고 await 가 async server component 에서 작동 확인.

Hint

Scaffold 엔 create-next-app 써. Page component 가 default 로 Server Component. params object 가 Promise<{ id: string }> — .id 접근 전 await.

App Router 구조

Route segment props 가 자동 타입 붙음

데이터 fetching 과 revalidation

Code

External links

Exercise

Progress

댓글 0