将 HTML 模板集成到 Next.js 13 项目中的步骤是什么？

Question

是否有人可以提供有关如何将使用 Bootstrap 或 Tailwind CSS 的 HTML 模板转换为 Next.js 13.4 项目的指导？我之前使用过 Next.js 12，但我知道项目结构发生了显着变化，不再需要 _app.js 和 _document.js 等文件。您能否提供一些关于如何在更新的 Next.js 13.4 结构中有效地调整和集成这些模板的见解或想法？

谷歌搜索了一段时间找不到正确的答案

Answer 1

熟悉 Next.js 文档，特别是 Next Router 功能会很有帮助。这将使您更好地了解路由在 Next.js 应用程序路由器中的工作原理 [(https://nextjs.org/docs)] 1

选择“使用应用程序路由器文档”：

Answer 2

迁移文件

根据我的经验，复制页面最终会变得很容易。困难的是调整应用程序路由器而不是页面路由器。首先，对于仅使用客户端渲染的任何内容，在文件的最顶部添加

"use-client"

。

迁移逻辑代码

我这样说是为了将您的项目迁移到App Router。任何使用服务器端渲染的文件都可以写入函数内部，假设文件顶部没有粘贴

"use-client"

。

了解文件结构

如您所知，两个文件被删除。这就是

_document.js

和

_app.js

。现在有

layout.js

和

template.js

。您可以在要应用模板的根文件夹中创建

layout.js

和

template.js

文件。

因此，当您有一个影响整个项目的模板文件时，您可以将其放在项目的根目录中。如果它要影响某个功能，您可以将其放入功能项目中。

资源与乐趣

就像我之前的答案一样，查看文档是最好的选择。享受吧！

• 模板和布局文件，
• 项目结构,
• 路由您的文件，