メタ、OGP

1import { NextSeo } from 'next-seo';
2import { useRouter } from 'next/router';
3import React, { useRef, useState } from 'react';
4import Button from '../components/button';
5import { Site } from '../lib/site';
6
7const Meta = () => {
8  const [title, setTitle] = useState<string>('メタ, OGP');
9  const ref = useRef<HTMLInputElement>(null);
10  const router = useRouter();
11
12  return (
13    <div>
14      <NextSeo
15        title={title}
16        openGraph={{
17          images: [
18            {
19              url: `${Site.origin}/images/${router.query.id as string}.png`,
20            },
21          ],
22        }}
23      />
24
25      <label className="mb-4 inline-block">
26        <span>新しいタイトル</span>
27        <input
28          type="text"
29          className="rounded border block mt-2 bg-transparent"
30          autoComplete="off"
31          autoFocus
32          ref={ref}
33        />
34      </label>
35
36      <Button
37        onClick={() => {
38          setTitle(ref.current?.value as string);
39        }}
40      >
41        ページタイトルを変更
42      </Button>
43    </div>
44  );
45};
46
47export default Meta;