Доработка страницы поста
Добавление title на страницу поста
В файле pages/posts/[id].js добавим тег title, используя данные поста. Вам нужно добавить импорт next/head в начало файла и обновить компонент Post, добавив тег title:
// Добавьте этот импорт
import Head from 'next/head';
export default function Post({ postData }) {
return (
<Layout>
{/* Добавьте этот тег <Head> */}
<Head>
<title>{postData.title}</title>
</Head>
{/* Оставьте существующий код здесь */}
</Layout>
);
}Форматирование даты
Для форматирования даты мы будем использовать библиотеку date-fns. Сначала установите её:
npm install date-fnsЗатем создайте файл components/date.js и добавьте следующий компонент 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>;
}Примечание: Различные варианты строк для
format()можно посмотреть на сайте date-fns.
Теперь откройте pages/posts/[id].js, добавьте импорт компонента Date в начало файла и замените {postData.date} на него:
// Добавьте этот импорт
import Date from '../../components/date';
export default function Post({ postData }) {
return (
<Layout>
{/* Оставьте существующий код здесь */}
{/* Замените {postData.date} на это */}
<Date dateString={postData.date} />
{/* Оставьте существующий код здесь */}
</Layout>
);
}Если вы откроете http://localhost:3000/posts/pre-rendering, теперь дата должна отображаться в формате "1 января 2020".
Добавление CSS
Наконец, добавим немного CSS, используя ранее созданный файл styles/utils.module.css. Откройте pages/posts/[id].js, добавьте импорт CSS-файла и замените компонент Post следующим кодом:
// Добавьте этот импорт в начало файла
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>
);
}Если вы откроете http://localhost:3000/posts/pre-rendering, страница теперь должна выглядеть лучше:
Отличная работа! Далее мы доработаем главную страницу и завершим проект!