不工作<title>Nextjs 中的 <meta> 標記構建文件
[英]Not working <title><meta> tag build file in Nextjs
問題描述
我創建了簡單的動態頁面。 如果我在localhost上運行它，則tile和meta標記工作正常。 當我構建它時，我在查看頁面源代碼中看不到title和meta標記。
你能檢查一下我的代碼<title>和<meta>標簽部分嗎？
category/[list]/[id].js
import { useRouter } from 'next/router'
import Head from 'next/head'
import { Grid, Image, Segment, Card } from "semantic-ui-react"
import 'semantic-ui-css/semantic.min.css'
import Layout from '../../../components/layout'
import Link from "next/link"
const Post = (props) => {
const router = useRouter()
const { Id } = router.query
console.log(props.category_list)
return (
<>
<Layout>
<Head>
<meta charSet="utf-8" />
<title>Welcome to Payments, Deals</title>
<meta name="description" content="This is sample content" />
<meta name="keywords" content="" />
<meta name="google-site-verification" content="rtIRrUNRpgZ_lFtlfS8LJ0-8j_d569BXS9NOGa_nM6Y" />
</Head>
<Grid className="store-list">
<Grid.Column width={16}>
<p>
<span>{props.category_title.heading_label}</span>
</p>
</Grid.Column>
</Grid>
<Grid columns={4} className="all-offers storeList">
{props.category_list.map((x) => {
return (
<Grid.Column>
<Segment>
<Card>
<Link href={"../../store" + "/" + x.name + "/" + x.store_id} passHref={true}>
<a> <Image
src={x.image}
alt=""
className="collection-img"
></Image>
</a>
</Link>
<Card.Content>
<Link href={"../../store" + "/" + x.name + "/" + x.store_id} passHref={true}>
<a>
<Card.Header>{x.name}</Card.Header>
</a>
</Link>
<Card.Description>{x.store_summary}</Card.Description>
</Card.Content>
<Card.Content extra>
<p className="rewards">
<span>
<img src="/images/rewards.png" alt=""></img>
</span> Cash rewards upto <span>AED {x.cashback}</span>
</p>
<p className="location">
<span>
<img src="/images/location.png" alt=""></img>
</span>
<span className="store-location" key="index">{x.store_branches}</span>
{/* {x.store_branches.map((locations, index) => (
<span className="store-location">
{index === 0 ? (
<span>{locations.store_location}</span>
) : index >= 1 ? (
<span>
, {locations.store_location}
</span>
) : null}
</span>
))} */}
</p>
</Card.Content>
</Card>
</Segment>
</Grid.Column>
);
})}
</Grid>
</Layout>
</>
)
}
export async function getStaticPaths() {
// change your API url to get ALL categories
const topMenu = await fetch('https://Sampleapp.ae/api/v5/web/categories', {
method: 'POST',
body: JSON.stringify({ title: "React POST Request Example" }),
headers: { "Content-Type": "application/json" },
})
const menus = await topMenu.json();
const s = menus.categories;
// Get the paths we want to pre-render based on posts, play with params variable you are returning
const paths = s.map((post) => ({
params:
{
list: `${post.store_name}`,
id: `${post.id}`,
}
}))
// We'll pre-render only these paths at build time.
// { fallback: blocking } will server-render pages
// on-demand if the path doesn't exist.
return { paths, fallback: false }
}
export async function getStaticProps(context) {
const id = context.params.id;
const postBody = {
category_id: id,
offer_type: "",
};
const offerList = await fetch('https://simple.ae/api/v5/web/list', {
method: 'POST',
body: JSON.stringify(postBody),
headers: { "Content-Type": "application/json" },
})
const category = await offerList.json();
// const bookJson = JSON.stringify(book)
// const bookJson=offerData.stores;
const category_list = category.stores;
const category_title = category;
return {
props: {
category_list,
category_title
}
};
}
export default Post;
1 個解決方案
解決方案1
0 2021-10-15 09:51:22
任何使用 JavaScript 完成的 dom 操作都不會在視圖源中可見。
查看源代碼僅顯示從 Web 服務器傳送到瀏覽器的 HTML。
將帶有圖像和標題的元標記添加到Angular 6項目
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.