Mejorando la Página de Publicación
Agregando title a la Página de Publicación
En pages/posts/[id].js, agreguemos la etiqueta title usando los datos de la publicación. Necesitarás agregar una importación para next/head al inicio del archivo y añadir la etiqueta title actualizando el componente Post:
// Agrega esta importación
import Head from 'next/head';
export default function Post({ postData }) {
return (
<Layout>
{/* Agrega esta etiqueta <Head> */}
<Head>
<title>{postData.title}</title>
</Head>
{/* Mantén el código existente aquí */}
</Layout>
);
}Formateando la Fecha
Para formatear la fecha, usaremos la librería date-fns. Primero, instálala:
npm install date-fnsLuego, crea un archivo llamado components/date.js y agrega el siguiente componente Date:
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>;
}Nota: Puedes ver las diferentes opciones de cadenas para
format()en el sitio web de date-fns.
Ahora, abre pages/posts/[id].js, agrega una importación para el componente Date al inicio del archivo y úsalo en lugar de {postData.date}:
// Agrega esta importación
import Date from '../../components/date';
export default function Post({ postData }) {
return (
<Layout>
{/* Mantén el código existente aquí */}
{/* Reemplaza {postData.date} con esto */}
<Date dateString={postData.date} />
{/* Mantén el código existente aquí */}
</Layout>
);
}Si accedes a http://localhost:3000/posts/pre-rendering, ahora deberías ver la fecha escrita como "January 1, 2020".
Agregando CSS
Finalmente, agreguemos algo de CSS usando el archivo styles/utils.module.css que añadimos antes. Abre pages/posts/[id].js, luego agrega una importación para el archivo CSS y reemplaza el componente Post con el siguiente código:
// Agrega esta importación al inicio del archivo
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>
);
}Si accedes a http://localhost:3000/posts/pre-rendering, la página ahora debería verse un poco mejor:
¡Buen trabajo! A continuación, mejoraremos la página de índice y ¡habremos terminado!