Pages Router: 投稿ページの仕上げ

投稿ページに `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 にアクセスすると、日付が "January 1, 2020" と表示されるようになります。

CSSの追加

最後に、前に追加した styles/utils.module.css ファイルを使用して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 にアクセスすると、ページの見た目が少し改善されているはずです：

よくできました！次はインデックスページを仕上げて完成です！

投稿ページの仕上げ

投稿ページに title を追加

日付のフォーマット

CSSの追加

On this page

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