我在我的_app。TSX和我的_document。在我的nextjs应用程序的TSX页面(与react v18)。
我不能使浏览器选项卡更新标题或favicon保存在那些头标签。
在app.tsx中我有:
<>
<Head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
<link rel="manifest" href="/site.webmanifest"></link>
</Head>
<ChakraProvider theme={theme}>
<ApolloProvider client={apolloClient}>{getLayout(<Component {...pageProps} />)}</ApolloProvider>
</ChakraProvider>
</>
在_document。我有:
<Html lang="en">
<Head>
<meta name="theme-color" key="theme-color" content="#000000" />
<meta name="description" content="this is my description" key="description" />
<meta property="og:title" content="i expect to see this in the browser tab" key="title" />
<meta property="og:description" content="can't get these tags to populate" key="og:description" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Poppins:wght@300;400;600&family=Kristi&display=swap" rel="stylesheet" />
</Head>
我能做些什么来强制nextjs读取我的头部标签?
我试过将所有这些添加到_document。tsx文件:
<link rel="apple-touch-icon" sizes="180x180" href="/public/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="icon" href="/favicon.ico" />
我将这些文件分别保存在一个公共文件夹中。
使用next/head，您可以将head标签放入页面中，并在其中编写类似于
的功能组件import React from "react";
import Head from 'next/head';
const MyPage = () => {
return (
<>
<Head>
<title>Why us</title>
<link rel="icon" href="/logo192.png" />
</Head>
</>
)
}
export default MyPage;
通用解决方案更新
头组件import React from 'react';
import NextHead from 'next/head';
const Head = ({ title, description }) => (
<NextHead>
<meta charSet="UTF-8" />
<title>{title || ''}</title>
<link rel="icon" href="/favicon.ico" /> {/* icon image */}
<meta name="description" content={description || ''} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
</NextHead>
);
export default Head;
我们在layout.tsx中使用Head组件
const Layout = ({ children }) => {
return(
<>
<Head title="Generic Title" description="Generic Title" />
<div id="layout-wrapper">
<Header /> {/*your header component*/}
<main>
<Sidebar /> {/*your sidebar component*/}
<div className="main-content">{children}</div>
</main>
<Footer /> {/*your footer component*/}
</div>
</>
)
}
现在我们在_app.js中使用布局组件
const App = ({ Component, pageProps }) => {
return(
<Provider store={store}>
<Layout>
<div className="page-content">
<Component {...pageProps} />
</div>
</Layout>
</Provider>
)
}
更新页面特定的标题方法
_app.js
import { NextSeo } from "next-seo";
const App = ({ Component, pageProps }) => {
return(
<Provider store={store}>
<Layout>
<div className="page-content">
<NextSeo
defaultTitle="Generic Title"
title={pageProps && pageProps.title ? pageProps.title : ""}
/>
<Component {...pageProps} />
</div>
</Layout>
</Provider>
)
}
示例页面
import { GetServerSideProps } from 'next';
const Example = () => {
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
return {
props: {
title: 'Example Page'
},
};
};
你也可以在你的应用中使用Head标签，比如
import Head from 'next/head'
function App({ Component, pageProps }) {
return (
<>
<Head>
<title>My Next App</title>
<meta name='description' content='This is a desription for My Next App'/>
<link rel="icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</>
)
}
export default App