2f:["$","section","3",{"className":"mb-16","children":[["$","h2",null,{"className":"text-2xl md:text-3xl font-bold text-white mb-6","children":"Exemplos Práticos: Tipando Cada Arquivo"}],[["$","p","0",{"className":"text-gray-300 leading-relaxed mb-6","children":"Cada arquivo especial do App Router tem sua assinatura. Vamos ver todas."}],["$","h3","1",{"className":"text-xl font-semibold text-white mb-4","children":"tsconfig.json Otimizado pra Next.js"}],["$","div","2",{"dangerouslySetInnerHTML":{"__html":"

// tsconfig.json - configuração recomendada\n{\n  \"compilerOptions\": {\n    \"target\": \"ES2017\",\n    \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n    \"allowJs\": true,\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noEmit\": true,\n    \"esModuleInterop\": true,\n    \"module\": \"esnext\",\n    \"moduleResolution\": \"bundler\",\n    \"resolveJsonModule\": true,\n    \"isolatedModules\": true,\n    \"jsx\": \"preserve\",\n    \"incremental\": true,\n    \"plugins\": [\n      { \"name\": \"next\" }\n    ],\n    \"paths\": {\n      \"@/*\": [\"./src/*\"]\n    }\n  },\n  \"include\": [\"next-env.d.ts\", \"**/*.ts\", \"**/*.tsx\", \".next/types/**/*.ts\"],\n  \"exclude\": [\"node_modules\"]\n}\n

"}}],["$","h3","3",{"className":"text-xl font-semibold text-white mb-4","children":"next.config.ts com Tipagem"}],["$","div","4",{"dangerouslySetInnerHTML":{"__html":"

// next.config.ts (TypeScript nativo no Next.js 15+)\nimport type { NextConfig } from \"next\";\n\nconst nextConfig: NextConfig = {\n  reactStrictMode: true,\n  images: {\n    remotePatterns: [\n      {\n        protocol: \"https\",\n        hostname: \"images.unsplash.com\",\n      },\n    ],\n  },\n  experimental: {\n    typedRoutes: true, // ativa tipagem de rotas!\n  },\n};\n\nexport default nextConfig;\n

"}}],["$","h3","5",{"className":"text-xl font-semibold text-white mb-4","children":"layout.tsx: Root Layout Tipado"}],["$","div","6",{"dangerouslySetInnerHTML":{"__html":"

// app/layout.tsx\nimport type { Metadata } from \"next\";\nimport type { ReactNode } from \"react\";\n\n// Tipo das props do layout\ntype RootLayoutProps = {\n  children: ReactNode;\n};\n\nexport const metadata: Metadata = {\n  title: {\n    template: \"%s | MeuApp\",\n    default: \"MeuApp\",\n  },\n  description: \"Descrição do app\",\n};\n\nexport default function RootLayout({ children }: RootLayoutProps) {\n  return (\n    <html lang=\"pt-BR\">\n      <body>{children}</body>\n    </html>\n  );\n}\n\n// Layout com múltiplos slots (parallel routes)\ntype DashboardLayoutProps = {\n  children: ReactNode;\n  analytics: ReactNode;\n  notifications: ReactNode;\n};\n\nexport default function DashboardLayout({\n  children,\n  analytics,\n  notifications,\n}: DashboardLayoutProps) {\n  return (\n    <div>\n      {children}\n      {analytics}\n      {notifications}\n    </div>\n  );\n}\n

"}}],["$","h3","7",{"className":"text-xl font-semibold text-white mb-4","children":"page.tsx: Server Component Padrão"}],["$","div","8",{"dangerouslySetInnerHTML":{"__html":"

// app/page.tsx - Home (sem params)\nexport default function HomePage() {\n  // Server Component por padrão\n  // Pode usar async/await direto\n  return <h1>Home</h1>;\n}\n\n// app/blog/[slug]/page.tsx - Com params\ntype PageProps = {\n  params: Promise<{ slug: string }>;\n  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;\n};\n\nexport default async function BlogPage({ params, searchParams }: PageProps) {\n  const { slug } = await params;\n  const { page } = await searchParams;\n\n  const post = await getPost(slug);\n\n  return (\n    <article>\n      <h1>{post.title}</h1>\n    </article>\n  );\n}\n

"}}],"$L37","$L38","$L39","$L3a","$L3b"]]}]