Next.js App Router 中直接写原生 HTML 标签即可，但需遵循 JSX 规则：className 代替 class、htmlFor 代替 for、自闭合标签加 /、内联样式用对象；富文本用 dangerouslySetInnerHTML（仅限原生标签）；meta 和 title 须用 generateMetadata 或 layout/page 中的 片段；表单优先用 Server Action 而非 preventDefault + fetch。
Next.js App Router 里怎么写 HTML 标签
HTML 标签本身不需要“集成”，app 目录下所有 page.tsx 或 page.jsx 文件默认就是 React 组件，直接写原生 HTML 标签就行——比如 <div>、<code><p></p>、<section></section> 都能直接用，不加引号、不转义、不封装。
但要注意：这不是纯 HTML 文件，是 JSX 环境，所以：
-
class得写成className（React 规则） -
for属性得写成htmlFor - 自闭合标签必须写
/，比如<img src="/a.jpg" alt="">，不能只写<img src="/a.jpg" alt=""> - 内联样式用对象，不是字符串：
style={{ color: 'red' }}，不是style="color:red"
静态 HTML 字符串怎么安全插入（dangerouslySetInnerHTML）
如果真有后端返回的 HTML 字符串（比如 CMS 富文本），需要渲染，就得用 dangerouslySetInnerHTML。它不自动转义，有 XSS 风险，不能图省事直接塞用户输入。
常见错误现象：React does not recognize the `dangerouslySetInnerHTML` prop on a DOM element——说明你把它写在了自定义组件上，而不是原生 DOM 标签上。
立即学习“前端免费学习笔记（深入）”；
- 只能用在
<div>、<code><span></span>、<article></article>这类原生标签上 - 值必须是形如
{ __html: "<p>Hello</p>" }的对象 - Next.js App Router 默认开启 SSR，服务端执行时若
__html含非法字符（如未转义的<script></script>），可能直接报错或被截断
示例：
<div dangerouslySetInnerHTML={{ __html: markdownHtml }} />
HTML meta 标签和 head 内容怎么配
App Router 不再用 next/head，改用 generateMetadata 函数或 JSX 片段（仅限 layout.tsx 和 page.tsx）。
容易踩的坑：
-
<title></title>必须用generateMetadata动态生成才支持服务端注入；直接写<title>xxx</title>在page.tsx里会被忽略 -
<meta name="description">同理，硬写在 JSX 中不会进最终 HTML 的 - 想全局加
<link rel="icon">？放app/layout.tsx顶层的里，但注意路径：用/favicon.ico（public 目录下），别写../public/favicon.ico
HTML 表单提交怎么绕过客户端跳转（避免页面刷新）
Next.js App Router 默认把表单提交当普通 HTTP POST 处理，会触发全页重载——这和你写 <form action="/api/submit"></form> 的直觉一致，但通常你想要的是 fetch + preventDefault。
关键点：
- 只要没加
action或method，它就只是个普通 DOM 容器，不会自动提交 - 加了
action就走传统流程；想保 SEO 又要交互，得用useFormState或useFormStatus配合 Server Action - Server Action 返回后，Next.js 自动更新对应字段，但整个页面不刷新——前提是 action 函数导出在
"use server"环境下，且调用时用formAction属性而非onSubmit
一句话：别手写 event.preventDefault() + fetch，除非你明确要客户端逻辑；优先走 Server Action，HTML 表单语义保留，服务端也能处理。
最常被忽略的是：App Router 下 HTML 标签本身没“集成成本”，但每个看似简单的标签背后都连着 React 渲染规则、SSR 约束、安全边界和元信息生成机制——写对一行 className 容易，让 <meta> 在服务端正确输出、让富文本不炸掉 CSP、让表单提交既 SEO 友好又响应式，这些才是实际卡点。
