Not working <title><meta> tag build file in Nextjs

Question

I have created simple dynamic page. If I run it on localhost , the tile and meta tag are working fine. And when I build it, I could not see title and meta tag in view page source.

Could you please check my code <title> and <meta> tag part?

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.

View Source simply shows the HTML as it was delivered from the web server to our browser.

Not working <title><meta> tag build file in Nextjs

Question

1 answers

solution1
0 2021-10-15 09:51:22

Not working <title><meta> tag build file in Nextjs

Question

1 answers

solution1 0 2021-10-15 09:51:22

solution1
0 2021-10-15 09:51:22