html怎么转nextjs页面_HTML静态页如何迁移到Next.js框架-html教程-PHP中文网

next.js 不支持直接将 html 文件放入 pages 目录作为页面，仅识别 .js/.jsx/.ts/.tsx 文件；需转为 react 组件并适配 jsx 语法、资源路径、样式脚本引入及 ssr/csr 逻辑。

html怎么转nextjs页面_html静态页如何迁移到next.js框架

Next.js 默认不把纯 .html 文件当页面处理，哪怕你把它丢进 pages/ 目录下，访问时也会返回 404。它只认 .js、.jsx、.ts、.tsx 这几类后缀的文件为路由入口。

最稳妥的做法：新建 pages/about.js，用 export default 返回一个 React 组件，把原 HTML 的 body 内容转成 JSX（注意闭合标签、class 改 className、for 改 htmlFor）
如果只是临时展示、不想改结构，可以用 getStaticProps + dangerouslySetInnerHTML 加载 HTML 字符串，但要注意 XSS 风险，仅限可信源
别试图用 next.config.js 配置静态文件路由来“劫持” HTML 请求——Next.js 的 public 目录下放的 HTML 不走 SSR/SSG，无法用 getServerSideProps 等能力，且路径不会自动加 .html 后缀

原 HTML 里常见的 <style></style> 块、<script></script> 标签，直接塞进 React 组件会出问题：样式不生效、脚本不执行、甚至编译报错。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<style></style> 建议抽成独立 CSS 文件，用 import '../styles/about.css'；或者用 styled-jsx（Next.js 默认支持）写 scoped 样式
<script></script> 如果是初始化逻辑（比如统计代码），改用 next/script 组件，指定 strategy="afterInteractive" 或 "lazyOnload"，避免阻塞渲染
千万别在组件顶层写 document.getElementById —— SSR 阶段没有 document，会报错；需要 DOM 操作的逻辑必须包裹在 useEffect 里

原 HTML 中的 src="images/logo.png" 或 href="css/main.css" 在 Next.js 里大概率 404，因为资源加载规则完全不同。

静态资源统一放 public/ 目录下，路径从根开始引用：src="/images/logo.png"（注意开头的 /）
CSS 文件如果放在 public/，需用 next/head 手动注入 <link rel="stylesheet">；更推荐用 import 方式让 CSS Modules 或全局 CSS 被打包系统管理
JS 文件同理，不要 <script src="js/app.js"></script>，而是用 next/script 导入，或拆成模块用 import
相对路径（如 ../assets/）在 public 外一律无效，Next.js 不解析它们

比如原站有 product.html?id=123 或 user-123.html 这种命名，迁移到 Next.js 不能靠文件名硬编码，得靠动态路由机制。

pages/product/[id].js 对应 /product/123，用 getStaticPaths + getStaticProps 预生成，或 getServerSideProps 动态取数据
如果旧 URL 必须保留 ?id=123 形式，就用 pages/product.js，在组件里用 useRouter() 读取 router.query.id，但注意：这种页面无法被 SSG 预生成，SEO 友好度下降
URL 重定向需求（如 /old-page.html → /new-page）必须显式配置 next.config.js 的 async redirects() 函数，Next.js 不自动处理 HTML 文件名到新路由的映射