Em pages/posts/[id].js, adicione a tag title usando os dados da postagem. Importe next/head e adicione a tag title:
import Head from 'next/head'
export default function Post({ postData }) {
return (
<Layout>
<Head>
<title>{postData.title}</title>
</Head>
...
</Layout>
)
}Para formatar a data, usaremos a biblioteca date-fns. Primeiro, instale-o:
npm install date-fnsEm seguida, crie o componente Date em components/date.js:
import { parseISO, format } from 'date-fns'
export default function Date({ dateString }) {
const date = parseISO(dateString)
return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
}E use-o em pages/posts/[id].js:
// Add this line to imports
import Date from '../../components/date'
export default function Post({ postData }) {
return (
<Layout>
...
{/* Replace {postData.date} with this */}
<Date dateString={postData.date} />
...
</Layout>
)
}Se você acessar http://localhost:3000/posts/pre-rendering, deverá ver a data escrita como "January 1, 2020".
Por fim, vamos adicionar um pouco de CSS. Em pages/posts/[id].js, coloque tudo sob a tag article e use os módulos CSS como abaixo:
// Add this line
import utilStyles from '../../styles/utils.module.css'
export default function Post({ postData }) {
return (
<Layout>
<Head>
<title>{postData.title}</title>
</Head>
<article>
<h1 className={utilStyles.headingXl}>{postData.title}</h1>
<div className={utilStyles.lightText}>
<Date dateString={postData.date} />
</div>
<div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
</article>
</Layout>
)
}Se você acessar http://localhost:3000/posts/pre-rendering, a página deverá ficar um pouco melhor:
Ótimo trabalho! Vamos polir a página de índice a seguir e terminaremos!
