チャプター34

投稿ページの磨き上げ

投稿ページに`title`を追加

pages/posts/[id].jsで、投稿データを使用してtitleタグを追加しましょう。ファイルの先頭にnext/headのインポートを追加し、Postコンポーネントを更新してtitleタグを追加する必要があります。

// Add this import
import Head from 'next/head';
 
export default function Post({ postData }) {
  return (
    <Layout>
      {/* Add this <Head> tag */}
      <Head>
        <title>{postData.title}</title>
      </Head>
 
      {/* Keep the existing code here */}
    </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}の代わりにそれを使用します。

// Add this import
import Date from '../../components/date';
 
export default function Post({ postData }) {
  return (
    <Layout>
      {/* Keep the existing code here */}
 
      {/* Replace {postData.date} with this */}
      <Date dateString={postData.date} />
 
      {/* Keep the existing code here */}
    </Layout>
  );
}

https://:3000/posts/pre-renderingにアクセスすると、日付が「January 1, 2020」と表示されるはずです。

CSSの追加

最後に、以前追加したstyles/utils.module.cssファイルを使ってCSSを追加しましょう。pages/posts/[id].jsを開き、CSSファイルをインポートし、Postコンポーネントを以下のコードに置き換えてください。

// Add this import at the top of the file
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>
  );
}

https://:3000/posts/pre-renderingにアクセスすると、ページが少し見栄えが良くなっているはずです。

素晴らしい作業でした！次はインデックスページを磨き上げます。それが終われば完了です！

投稿ページの磨き上げ

投稿ページにtitleを追加

日付のフォーマット

CSSの追加

チャプター完了34

投稿ページに`title`を追加