Help us understand the problem. What is going on with this article?

Next.jsでmeta情報をSSRする

Next.jsを使った際にmeta情報をSSRする手順を備忘録として残しておきます。

Next.jsでSSRする際は、getInitialPropsを使うと思います。
こちらのコードを参考にして、getInitialPropsで取得したデータをもとにmeta情報を格納していけば、SSR可能です。
(非常に単純なことしか書いていない気が今更ながらしてきました。)

ここでは例としてクエリパラメータとして受け取った値をもとにmeta情報を作成するサンプルを下に書き残していきます。

ちなみにTypeScriptで書いていますが、書き慣れていない感がかなり出ていると思います。ご了承ください。

Next.js 9 (TypeScript) セットアップ

yarn add next@latest react@latest react-dom@latest
mkdir pages
vim pages/index.tsx

tsxファイルを設置します。

export default () => <p>Hello World</p>;

nextサーバを立ち上げます。

yarn next dev
# 多分下記のコマンドでも変わらない気がしています
# yarn next

と、このコマンドを実行すると、下記のコマンドを実行しろとエラーが出てくるので、言われたとおりに下記のコマンドを実行します。

yarn add --dev typescript @types/react @types/node

ここまで実行すると、カレントディレクトリに下記ファイルが生成されていることが確認できます。

  • tsconfig.json
  • next-env.d.ts

Typescriptで書き始めるまでの準備はここまでとなります。
なお、localhost:3000にアクセスすると、Hello Worldが表示されているのが確認できます。

TypeScriptサンプル(型チェック)

実際に型のチェックをしてくれるかをチェックしてみます。

const greeter = (person: string) => {
  return 'Hello ' + person
}

export default () => (
   <p>{greeter('World')}</p>
)

Hello Worldが表示されます。
今度は下記のように書き換えてみます。

const greeter = (person: string) => {
  return 'Hello ' + person
}

export default () => (
   <p>{greeter(123)}</p>
)

すると、Next.js側でConsoleに下記のようなエラーを吐き出してくれます。

6:16 Argument of type '123' is not assignable to parameter of type 'string'.
    4 |
    5 | export default () => (
  > 6 |    <p>{greeter(123)}</p>
      |                ^
    7 | )

Next.jsで動的にメタ情報を設定&SSRする

componentsディレクトリにhead.tsxを作成し、こちらにメタ情報表示のための処理を書いていきます。
(ファイル名やディレクトリ名は任意なので、componentsじゃなくてもOKです)

mkdir components
vim components/head.tsx

なおここのhead.tsxについては、こちらの記事(Next.jsでタイトルやメタタグやOGPなどのHeadタグを動的に設置するサンプル)の記述を、ほぼほぼそのまま引用させていただいています。

/*
 * 下記ページの内容をほぼほぼそのまま引用させていただいています。
 * https://t-cr.jp/memo/2201639257480a359
 */
import Head from 'next/head';

interface Props {
  title: string;
  description: string;
  keyword: string;
  image: string;
  url: string;
}

export default ({
  title,
  description,
  keyword,
  image,
  url
}: Props): JSX.Element => {
  return (
    <Head>
      <title>{title}</title>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta name="keywords" content={keyword} />
      <meta property="og:type" content="blog" />
      <meta property="og:url" content={url} />
      <meta property="og:image" content={image} />
      <meta property="og:site_name" content={title} />
      <meta name="twitter:card" content="summary" />
      <meta name="twitter:site" content="@tcr_jp" />
      <meta name="twitter:url" content={image} />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image} />
      <link rel="canonical" href={url} />
      <link
        rel="shortcut icon"
        href={
          'https://cdn.qiita.com/assets/favicons/public/production-4ff10c1e1e2b5fcb353ff9cafdd56c70.ico'
        }
      />
      <link
        rel="apple-touch-icon"
        href={
          'https://cdn.qiita.com/assets/favicons/public/apple-touch-icon-f9a6afad761ec2306e10db2736187c8b.png'
        }
      />
    </Head>
  );
};

上記のhead.tsxpages/index.tsxで読み込みます。

import Head from '../components/head';

const greeter = (person: string) => {
  return 'Hello ' + person;
};

export default () => (
  <div>
    <Head
      title={'タイトルです'}
      description={'ディスクリプションです'}
      keyword={'キーワードです!'}
      image={
        'https://qiita-user-profile-images.imgix.net/https%3A%2F%2Flh3.googleusercontent.com%2F-BUmWankl_aQ%2FAAAAAAAAAAI%2FAAAAAAAADys%2F8oi87glPMLA%2Fphoto.jpg%3Fsz%3D50?ixlib=rb-1.2.2&auto=compress%2Cformat&lossless=0&w=300&s=649d309c71e365e6fc6d6b6d205c3710'
      }
      url={'https://qiita.com/shinshin86'}
    />
    <p>{greeter('World')}</p>
  </div>
);

これでyarn next devをしてlocalhost:3000にアクセスし、右クリックからページのソースコードを表示するとmeta情報がSSRされているのが確認できます。

動的な値を元にしてメタ情報をSSRする

受け取ったクエリパラメータを元にメタ情報をSSRするため、pages/index.tsxを下記のように書き換えます。

import Head from '../components/head';

const greeter = (person: string) => {
  return 'Hello ' + person;
};

interface Props {
  title: string;
  description: string;
  keyword: string;
  image: string;
  url: string;
  text: string;
}

const Index = ({ title, description, keyword, image, url, text }: Props) => (
  <div>
    <Head
      title={title}
      description={description}
      keyword={keyword}
      image={image}
      url={url}
    />
    <p>{greeter(text)}</p>
  </div>
);

Index.getInitialProps = ({ query }) => {
  const { title, description, keyword, image, url, text } = query;
  return { title, description, keyword, image, url, text };
};

export default Index;

これでgetInitialProps内で受け取ったクエリパラメータを元に描画を行うようになります。
yarn next devでサーバを立ち上げて、下記のURLでアクセスすると、クエリパラメータとして渡した値を元にSSRされているのが確認できます。
(それにしてもとても長いURLになってしまった...)

http://localhost:3000/?title=%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%81%A7%E3%81%99&description=%E3%83%87%E3%82%A3%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A7%E3%81%99&keyword=%E3%82%AD%E3%83%BC%E3%83%AF%E3%83%BC%E3%83%89%E3%81%A7%E3%81%99%EF%BC%81&image=https://qiita-user-profile-images.imgix.net/https%3A%2F%2Flh3.googleusercontent.com%2F-BUmWankl_aQ%2FAAAAAAAAAAI%2FAAAAAAAADys%2F8oi87glPMLA%2Fphoto.jpg%3Fsz%3D50?ixlib=rb-1.2.2&auto=compress%2Cformat&lossless=0&w=300&s=649d309c71e365e6fc6d6b6d205c3710&https://qiita.com/shinshin86&text=world!!!!!!!!!!!!

参照

Blog - Next.js 9

⚡︎ Next.js 9が出た:ご機嫌な話 ⚡︎

Next.jsでタイトルやメタタグやOGPなどのHeadタグを動的に設置するサンプル

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away