NextSeo는 동적 메타 데이터를 사용하고 외부 API를 사용하여 소스 코드를 검사할 때 업데이트되지 않습니다.

7779 단어
안녕하세요, GraphQL(Apollo Client)을 사용하여 외부 API의 동적 메타 데이터를 사용할 때 내 문제와 내 Next JS 프로젝트에서 해결책을 찾은 방법을 공유하겠습니다.

apollo 클라이언트에서 "useQuery"를 사용하면 SEO를 사용하거나 Facebook, Linkedin과 같은 소셜 미디어에 URL을 공유할 때 작동하지 않습니다.

해결책은 getInitialProps의 비동기 메서드 및 적중 API와 함께 "getInitialProps"를 사용하는 것입니다.

const DetailBlogPage: NextPage = ({ data }: any) => {

    return (
        <SiteLayout>
            <NextSeo
                title={data.articles.title}
                description={data.article..summary}
                canonical={`https://www.nuliscv.com/blog/${data.article.slug}`}
                openGraph={{
                    type: 'website',
                    locale: 'id_ID',
                    url: `https://www.example.com/blog/${data.articles[0].slug}`,
                    site_name: 'Example.com',
                    images: [
                        { url: `https://abcdefg.directus.app/assets/${data.articles[0].image.id}` },
                    ]
                }}
            />
            <div>
                <DetailBlog data={data} />
            </div>
        </SiteLayout>
    )
}

DetailBlogPage.getInitialProps = async ({ query }) => {
    // do the data fetching here
    const { slug } = query;

    const errorLink = onError(({ graphqlErrors, networkError }: any) => {
        if (graphqlErrors) {
            graphqlErrors.map(({ message, location, path }: any) => {

            });
        }
    });

    const portfolioLink = from([
        errorLink,
        new HttpLink({ uri: "https://abcdefg.directus.app"}),
    ]);

    const client = new ApolloClient({
        cache: new InMemoryCache({
            addTypename: false
        }),
        link: portfolioLink,
    });


    const { data } = await client.query({
        query: GET_DETAIL_BLOG,
        variables: {
            slug
        }
    })

    return { data: data };
}

좋은 웹페이지 즐겨찾기