reactjs - 为 Next Js 项目 React Helm 还是 next/head？-6ren

reactjs - 为 Next Js 项目 React Helm 还是 next/head？

转载作者：行者123 更新时间：2023-12-03 15:40:02

34

4

我正在制作下一个 js 应用程序(React SSR)，现在我要在 head 中实现元标记。

所以现在我使用了 next/head在 _app.tsx 文件中，例如，

import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from '../src/theme';

export default class MyApp extends App {
  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement!.removeChild(jssStyles);
    }
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <React.Fragment>
        <Head>
          <title>My page</title>
          <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
        </Head>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <Component {...pageProps} />
        </ThemeProvider>
      </React.Fragment>
    );
  }
}

整个工作代码可以在沙箱中找到: https://codesandbox.io/s/interesting-tereshkova-217ks

我只是想知道是否使用 next/head在下一个js应用程序中本身就足够了，否则需要实现 react-helmet ??

如果 react-helmet需要然后请帮助我如何在提供的下一个 js 应用程序中实现。

我是 Next Js 和 SSR 的新手，所以请帮助我找到正确的方向，这是实现结果的最佳方法。

最佳答案

I am just to know whether using next/head itself enough in next js application or else need to implement react-helmet ??

如果您正在推出自己的服务器端渲染解决方案并且不使用 Next.js，那么使用 react-helmet 是有意义的。据我所知， next/head基本上是 react-helmet 的内置版本，可以完成 react-helmet 所做的一切。

所以不，如果您使用 Next.js，则不需要使用 react-helmet。只需使用 next/head .

If the react-helmet is needed then kindly help me how to implement in the provided next js application.

也就是说，如果你想在 Next.js 中使用 react-helmet，这里是一个例子: https://github.com/zeit/next.js/tree/canary/examples/with-react-helmet .不知道你为什么要这样做，但这个例子存在。有 some discussion关于它。

顺便说一句，就像 react-helmet 一样，你可以使用 next/head渲染树中的任何位置——不仅仅是 App像您的示例中那样的组件 - 所有标签都将聚合到 <head> 中标签在顶部。

关于reactjs - 为 Next Js 项目 React Helm 还是 next/head？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61063193/

34

4

0

文章推荐： python - 在Google Colab笔记本中运行localhost服务器

文章推荐： javascript - 引用错误 : customElements is not defined

java - 如何修改a的字段的字段....如link.next.next.next(.next*n) n次
这个问题已经有答案了: How to modify a public field of a field of a field… As in link.next.next.next(.next*n) n
java - 如何修改一个字段的一个公共(public)字段...如link.next.next.next(.next*n) n次
我有一个保存链接的数组。每个链接都有一个名为 next 的公共(public)字段，它可以保存另一个链接，该链接可以保存更多链接等。当我想删除东西时我可以做 array[x].next = array
javascript - Koa中，中间件中的await next()、return await next()、return next()、next()有什么区别？
文档概述了在中间件中使用“await next()”的用例，导致中间件暂停并触发下游的下一个中间件，直到所有中间件都执行完毕，此时上游级联将开始并且中间件将完整执行。如果用户想要缩短级联，那么单独写“
next.js - 将 next 的输出文件夹从 "_next"重命名为 "next"
我今天遇到了一个用例，我试图让我的 nextjs 应用程序在 android webview 中工作，不幸的是 android 不解析以 _next 开头的路径并且我的大部分块文件都在_next/st
javascript - 使用 .eq(3) 而不是 .next().next().next()
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
next.js - next.js 中的 apollo-client with `next-with-apollo` VS next.js 文档常见问题解答中显示的方法(不使用 `getDataFromTree` )
next-with-apollo npm 库和 the approach shown in next.js docs 中选择的“next.js 中的 apollo-client”方法对比. next.
next.js - 如何使用 next-auth 在 Next.js 中实现凭据授权？
我尝试使用 next-auth 获取凭据身份验证，但我没有使用它的经验，无论我做什么，我都会收到以下消息:[next-auth][error][callback_credentials_jwt_err
next.js - 如何使用 next.js 和 next-i18next 本地化路由？
更改语言时需要更改路线名称。例如，我有一条路线 /en/career但是当我改成捷克语时，我需要一条路线 /cs/kariera .基本上我需要本地化 URL。现在，当我在 /en/career 上时
jQuery(this).find ('title' ).next().next().next().eq(0).text();?
更好/优雅的方法是什么？ jQuery(this).find('title').next().next().next().eq(0).text(); //THIS WORKS 我尝试使用 jQuery
java - 链表中的节点、node.next 和 node.next.next 是什么？
我只是对 node 感到好奇。 node.next 和 node.next。到目前为止，我们已经了解到节点有两个部分，其中存储数据和下一个节点的地址(node.next)，然后是 node.next.
javascript - jQuery: "$(this).next().next()"有效，但 "$(this).next(' .div')"无效
好的，我正在尝试单独隐藏这组信息。这有效: $(".arrow").click(function() { $(this).next().next().slideToggle(); }); Mo
deployment - Next.js 中的 `next export` 和 `next build` 有什么区别？
我开发了一个 Web 应用程序，它使用 Nextjs 应用程序作为前端和一个 Python (Django) API 服务器作为后端。我的大多数前端页面都有对后端服务器的 API 调用(在 Compo
protecting routes in next js with middleware + next-auth(使用中间件+Next-auth保护Next JS中的路由)
如果我没有通过身份验证，我正在尝试使用NextJS中间件保护一些路由，我正在使用Next-auth进行身份验证，从文档中看，这就是MIDDLEWAR.TS文件应该是什么样子。Rn的问题是，即使当我通过
javascript - 在 next.config.js 中同时添加对 next-css 和 next-less 的支持
我正在使用 nextJs，需要添加对 less 和 css 的支持。我想要一个项目同时拥有 next-css 和 next-less 。但它一次接受一个。这是我正在使用的 const withCSS
typescript - 不支持通过 'next.config.ts' 的错误 : Configuring Next. js。请将文件替换为 'next.config.js'
我正在构建下一个项目的 typescript 。如果我将此配置文件保留为 next.config.js , 我在 tsconfig.json 收到警告说“找不到next.config.ts”。所以 t
django - 无法解析 ?next= 值来自 http ://login/? next=/my_page/使用 request.GET.get ('next' ,'' )
我有一个自定义登录网址/ View /模板。我对页面使用 @login_required 装饰器(让称为 my_page) 需要登录。试图访问 my_site.com/my_page 正确调用 my
ruby - 为什么 Ruby 中的 `next` 方法会引发 SyntaxError 而 `next!` 或 `self.next` 不会在猴子修补 String 类时引发语法错误？
下面的代码工作正常: class String def foo next! end end puts 'hh'.foo # hi 这个也很好用: class String d
Next-auth session immediately becomes unauthenticated after successful login in a Next.js app(成功登录到Next.js应用程序后，Next-auth会话立即变为未经身份验证)
我在我的Next.js应用程序中使用Next-auth进行身份验证。成功登录后，我立即被重定向到登录页面，表明该会话已变为未经身份验证。。相关代码片段：。_app.tsx：。Layout.tsx：。L
next.js - Next js中具有多个参数的动态路由 - 文件结构
我想在 nextjs 中创建动态页面以匹配以下路由 users/[user]/[dashboard]。我的文件结构 pages/ users/ -[user].js // will
next.js - 如何设置 next.js？
我直接按照官网的步骤操作: https://nextjs.org/docs/ 第一步。 npm install --save next react react-dom 步骤 2. 将脚本添加到 pac

首页

博学

6Ren·AI

商城

reactjs - 为 Next Js 项目 React Helm 还是 next/head？