我创建了一个简单的动态页面。如果我在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;
任何使用JavaScript完成的dom操作在视图源中都是不可见的。
查看源代码简单地显示从web服务器传递到浏览器的HTML。