Enrutador de Páginas: 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-fns

Luego, 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!

Mejorando la Página de Publicación

Agregando title a la Página de Publicación

Formateando la Fecha

Agregando CSS

On this page

Agregando `title` a la Página de Publicación