StarKirby Blog
← 返回文章列表

Next.js App Router 开发笔记

记录 App Router 下路由、布局和元数据的常用实践。

发布于 2026/03/221 min read
Next.js App Router 开发笔记 封面图

Next.js App Router 开发笔记

这篇示例主要用于验证:多级标题、代码块和图片在 MDX 中的表现。

布局与页面

app/layout.tsx 负责全局布局,app/page.tsx 对应首页。

tsx
export default function RootLayout({
  children,
}: Readonly<{ children: React.ReactNode }>) {
  return <html lang="zh-CN"><body>{children}</body></html>;
}

常用命令

bash
pnpm dev
pnpm lint
pnpm build

版本对照

包名版本
next16.2.1
react19.2.4
tailwindcss^4

App Router 示意图