不工作<title>Nextjs 中的 <meta> 标记构建文件

Question

I have created simple dynamic page.我创建了简单的动态页面。 If I run it on localhost , the tile and meta tag are working fine.如果我在localhost上运行它，则tile和meta标记工作正常。 And when I build it, I could not see title and meta tag in view page source.当我构建它时，我在查看页面源代码中看不到title和meta标记。

Could you please check my code <title> and <meta> tag part?你能检查一下我的代码<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>
                                                        ,&nbsp;&nbsp;{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;

Answer 1

Any dom manipulation done using JavaScript will not be visible in the view source.任何使用 JavaScript 完成的 dom 操作都不会在视图源中可见。

View Source simply shows the HTML as it was delivered from the web server to our browser.查看源代码仅显示从 Web 服务器传送到浏览器的 HTML。

不工作<title>Nextjs 中的 <meta> 标记构建文件

问题描述

1 个解决方案

解决方案1
0 2021-10-15 09:51:22

不工作<title>Nextjs 中的 &lt;meta&gt; 标记构建文件

问题描述

1 个解决方案

解决方案1 0 2021-10-15 09:51:22

不工作<title>Nextjs 中的 <meta> 标记构建文件

解决方案1
0 2021-10-15 09:51:22