Meta
Let's say we have a page that fetchs data from an API:
import withPage from '@lib/page/withPage'
import * as ArticleService from '@features/article/data/services'
function ArticleDetailPage({ articleDetail }) {
...
}
ArticleDetailPage.getInitialProps = async ({ asPath, query }) => {
const articleDetail = await ArticleService.getArticleDetail({ id: query.id })
return {
articleDetail
}
}
export default withPage()(ArticleDetailPage)
To add title and meta tags, just add some properties to the returning object from getInitialProps()
.
import withPage from '@lib/page/withPage'
import * as ArticleService from '@features/article/data/services'
function ArticleDetailPage({ articleDetail }) {
...
}
ArticleDetailPage.getInitialProps = async ({ asPath, query }) => {
const articleDetail = await ArticleService.getArticleDetail({ id: query.id })
return {
articleDetail,
// Add title and meta tags here...
title: articleDetail.title,
meta: {
description: articleDetail.excerpt,
keywords: articleDetail.tags.join(', ')
},
}
}
export default withPage()(ArticleDetailPage)