NextJS: unable to set title with dynamic routes

Question

I am not able to set title and others meta tags on a page created with dynamic routes. Title and metas are set correctly when the page is loaded in the browser, but they are not set in the raw HTML code I fetch using wget.

I have tried using both <Head> and <NextSeo> with same results. I have also tried both getStaticProps() / getStaticPaths() and getServerSideProps() approaches.

Here is a simplified snippet of my code.

const PostPage = ( { post } ) => {
    let txt = post.text || post.brief_descr;


    return (
        <Layout>
            <NextSeo
                title={post.title}
                description={post.brief_descr}
            />
            <h1>Hello World</h1>
        </Layout>
    );
};


export async function getServerSideProps ( { res, query } ) {
    const p = query.params[ 0 ];

    const data = await act_post_get( id, slug )();

    return {
        props: { post: data }
    };

}

Hello @juliomalves it was not the `Layout` component the culprit, but my `_document.tsx` file with a wrong `getInitialProps()`. Now it works. Thanks for your reply. — Fabio Rotondo, Feb 21 '22 at 08:50

score 0 · Answer 1 · answered Feb 21 '22 at 08:48

0

It turned out I was messing things up with the _document.tsx and the getInitialProps() function. By simplifying the _document.tsx I was able to use the getStaticProps() with revalidate option correctly, and now it works as expected.

answered Feb 21 '22 at 08:48

Fabio Rotondo

390
2
10

NextJS: unable to set title with dynamic routes

1 Answers1