我尝试使用nextjs只是我的网站的一部分。导航栏已经存在于其他框架中,甚至没有React。我想在<div id="nextjs_div">...</div>中使用nextjs,即。只是我网站的一部分。问题是,nextjs呈现了一个包含head和body组件的整个HTML页面。所以我想要的基本上是删除这些组件,只呈现一个div,它将被挂载到我的页面中。我尝试修改page/_document,但无法成功。你有一个想法,我怎么能做到这一点。
<div id="nextjs_div">...</div>
page/_document
mcdcgff01#
我主要是为任何来自谷歌的人写这篇文章,因为我希望/怀疑OP在3年后仍然有这个问题。这里有两种可能的用例:1.使用NextJS作为模板/组件框架,支持使用JSX和服务器端渲染来创建部分HTML文档1.使用NextJS作为React服务器,并创建部分HTML文档,这些文档本身在客户端上是React性的。用例1是可行的,相对简单,如果有点黑客,但不是NextJS支持的用例。用例2将涉及使用下面的代码作为起点。我的建议是用renderToString替换renderToStaticMarkup,然后开始研究NextJS如何实现React水合,因为你必须自己做。合理地说,如果你可以做任何事情来避免这样做,请使用React。要使用NextJS呈现部分HTML文档,需要通过页面路由器和renderToStaticMarkup使用API处理程序。如果你使用renderToStaticMarkup与应用程序路由器,它会抱怨。文件./src/pages/test.tsx:
renderToString
renderToStaticMarkup
./src/pages/test.tsx
import type { NextApiRequest, NextApiResponse } from "next" import { renderToStaticMarkup } from 'react-dom/server' export default handler( req: NextApiRequest, res: NextApiResponse<string> ): void => { if (req.method !== 'GET') { return void res.status(405) .send(`Only GET requests are allowed on this endpoint`) } const jsxElement = <div id="nextjs_div">Test</div> const plaintextHtml = renderToStaticMarkup(jsxElement) res.status(200).send(plaintextHtml) }
kiz8lqtg2#
Next.js是一个用于创建完整页面的框架,很可能不适合用于创建页面的一部分。你可以使用React。如果你可以从导航栏生成HTML,那么你可以将其插入到Next.js项目中。参见Add HTML header to Document.js example
2条答案
按热度按时间mcdcgff01#
我主要是为任何来自谷歌的人写这篇文章,因为我希望/怀疑OP在3年后仍然有这个问题。
这里有两种可能的用例:
1.使用NextJS作为模板/组件框架,支持使用JSX和服务器端渲染来创建部分HTML文档
1.使用NextJS作为React服务器,并创建部分HTML文档,这些文档本身在客户端上是React性的。
用例1是可行的,相对简单,如果有点黑客,但不是NextJS支持的用例。
用例2将涉及使用下面的代码作为起点。我的建议是用
renderToString
替换renderToStaticMarkup
,然后开始研究NextJS如何实现React水合,因为你必须自己做。合理地说,如果你可以做任何事情来避免这样做,请使用React。要使用NextJS呈现部分HTML文档,需要通过页面路由器和
renderToStaticMarkup
使用API处理程序。如果你使用renderToStaticMarkup
与应用程序路由器,它会抱怨。文件
./src/pages/test.tsx
:kiz8lqtg2#
Next.js是一个用于创建完整页面的框架,很可能不适合用于创建页面的一部分。你可以使用React。
如果你可以从导航栏生成HTML,那么你可以将其插入到Next.js项目中。
参见Add HTML header to Document.js example