Skip to content

Commit a6fc8e8

Browse files
OHMORIYUSUKEOHMORIYUSUKE
committed
Create Head component
1 parent c1b491e commit a6fc8e8

File tree

6 files changed

+83
-15
lines changed

6 files changed

+83
-15
lines changed

‎components/CustomHead.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import Head from 'next/head';
2+
import React from 'react';
3+
4+
import { URL } from '../utils/cangeURL';
5+
6+
type Props = {
7+
title: string;
8+
postId: number;
9+
image: string;
10+
};
11+
12+
const CustomHead: React.FC<Props> = (props) => {
13+
return (
14+
<>
15+
<Head>
16+
<title>OmnisCode</title>
17+
<link rel="icon" href="/favicon.ico" />
18+
19+
<meta property="og:title" content="OmnisCode" />
20+
<meta property="og:type" content="website" />
21+
<meta property="og:url" content={URL + '/post/' + props.postId} />
22+
<meta property="og:image" content={props.image} />
23+
<meta property="og:site_name" content="OmnisCode" />
24+
<meta property="og:description" content={props.title} />
25+
{/* Twitter設定 */}
26+
<meta name="twitter:card" content="summary_large_image" />
27+
</Head>
28+
</>
29+
);
30+
};
31+
32+
export default CustomHead;

‎components/DefaultHead.tsx

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Head from 'next/head';
2+
import React from 'react';
3+
4+
import { URL } from '../utils/cangeURL';
5+
6+
type Props = {
7+
pageName: string;
8+
};
9+
10+
const DefaultHead: React.FC<Props> = (props) => {
11+
return (
12+
<>
13+
<Head>
14+
<title>OmnisCode</title>
15+
<link rel="icon" href="/favicon.ico" />
16+
<meta property="og:title" content="OmnisCode" />
17+
<meta property="og:type" content="website" />
18+
{/* URL = https://omniscode.one */}
19+
<meta property="og:url" content={URL + '/' + props.pageName} />
20+
<meta
21+
property="og:image"
22+
content="https://omniscode-og-image.vercel.app/package%20main%0A%0Aimport%20%22fmt%22%0A%0Afunc%20main()%20%7B%0A%20%20%20%20fmt.Println(%22hello%20world%22)%0A%7D.jpeg?theme=gradient-dark&lang=go"
23+
/>
24+
<meta property="og:site_name" content="OmnisCode" />
25+
<meta property="og:description" content="コードを共有するSNS" />
26+
{/* Twitter設定 */}
27+
<meta name="twitter:card" content="summary_large_image" />
28+
</Head>
29+
</>
30+
);
31+
};
32+
33+
export default DefaultHead;

‎pages/signup.tsx

+16-15
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
import { NextPage } from 'next';
2-
import Head from 'next/head';
32
import { Grid, TextField, Button } from '@material-ui/core';
43
import React from 'react';
54

5+
import CustomHead from '../components/CustomHead';
6+
import DefaultHead from '../components/DefaultHead';
7+
8+
/**
9+
* CustomHeadは記事詳細ページ専用のコンポーネントです。
10+
* ->使い方 35行目を参照
11+
* DefaultHeadはその他のページで使うコンポーネントです。
12+
* ->ベースURL以下のURLパラメータをpageNameに入れてください
13+
*/
14+
615
const Signup: NextPage = () => {
716
//登録ボタンが押されたときの処理
817
function submit(): void {
@@ -26,20 +35,12 @@ const Signup: NextPage = () => {
2635
}
2736
return (
2837
<>
29-
<Head>
30-
<title>OmnisCode</title>
31-
<link rel="icon" href="/favicon.ico" />
32-
33-
<meta property="og:title" content="OmnisCode" />
34-
<meta property="og:type" content="website" />
35-
<meta property="og:url" content="https://ocode.one" />
36-
<meta property="og:image" content="https://sample.png" />
37-
<meta property="og:site_name" content="OmnisCode" />
38-
<meta
39-
property="og:description"
40-
content="OmnisCode | コードを共有するSNS"
41-
/>
42-
</Head>
38+
{/* <CustomHead
39+
title="記事のタイトルを入れる"
40+
postId={1}
41+
image="OGP画像のパスが入ります。"
42+
/> */}
43+
<DefaultHead pageName="sinup" />
4344
<Grid
4445
container
4546
alignItems="center"

‎public/fabicon.ico

66.1 KB
Binary file not shown.

‎public/favicon.ico

-14.7 KB
Binary file not shown.

‎utils/cangeURL.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const URL = 'http://localhost:3000';
2+
//デプロイ時は https://omniscode.one に変更

0 commit comments

Comments
 (0)