Skip to content

Commit 900d21e

Browse files
dc7290dc7290
committed
Headコンポーネント実装
1 parent fccce97 commit 900d21e

File tree

33 files changed

+426
-739
lines changed

33 files changed

+426
-739
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,4 @@ public/sitemap*.xml
3232
.idea/
3333
.vercel
3434
.eslintcache
35+
tsconfig.tsbuildinfo

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,11 @@
2626
"dependencies": {
2727
"dayjs": "1.11.2",
2828
"highlight.js": "11.5.1",
29+
"lazysizes": "^5.3.2",
2930
"microcms-js-sdk": "2.0.0",
3031
"microcms-richedit-processer": "1.1.0",
3132
"next": "12.1.6",
33+
"next-head-seo": "0.1.3",
3234
"next-sitemap": "3.0.5",
3335
"react": "18.1.0",
3436
"react-dom": "18.1.0",

‎pages/[slug].tsx‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { processer, createTableOfContents } from 'microcms-richedit-processer'
22
import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'
3-
import Head from 'next/head'
43

54
import { BlogDetailLayout } from '~/src/components/BlogDetailLayout'
65
import { BlogDetailLayoutProps } from '~/src/components/BlogDetailLayout/BlogDetailLayout'
7-
import { DESCRIPTION, OG_DESCRIPTION, OG_IMAGE, OG_TITLE, returnTitle } from '~/src/utils/meta'
6+
import { Head } from '~/src/components/Head'
87
import { getBlog, getGlobalContents } from '~/src/utils/microCMS/getContents'
98

109
export const getAllSlugPaths = async () => {
@@ -54,18 +53,9 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params, preview, p
5453
}
5554

5655
const IndexPage: NextPage<Props> = (props) => {
57-
const title = returnTitle(props.content.title)
58-
const description = props.content.description
59-
6056
return (
6157
<>
62-
<Head>
63-
<title>{title}</title>
64-
<meta key={OG_TITLE} property={OG_TITLE} content={title} />
65-
<meta key={DESCRIPTION} name={DESCRIPTION} content={description} />
66-
<meta key={OG_DESCRIPTION} property={OG_DESCRIPTION} content={description} />
67-
<meta key={OG_IMAGE} property={OG_IMAGE} content={props.content.ogimage.url} />
68-
</Head>
58+
<Head title={props.content.title} description={props.content.description} ogImage={props.content.ogimage.url} />
6959
<BlogDetailLayout {...props} />
7060
</>
7161
)

‎pages/_app.tsx‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import '~/src/styles/reset.css'
22
import '~/src/styles/colors.css'
3+
import 'lazysizes'
34
import 'highlight.js/styles/hybrid.css'
45

56
import { AppProps } from 'next/app'
@@ -16,28 +17,20 @@ function MyApp({ Component, pageProps }: AppProps) {
1617
<Component {...pageProps} />
1718
{GA_ID !== undefined && (
1819
<>
20+
<Script src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} />
1921
<Script
20-
src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
21-
onLoad={() => {
22-
const script = document.createElement('script')
23-
script.innerHTML = `
24-
window.dataLayer = window.dataLayer || [];
25-
function gtag(){dataLayer.push(arguments);}
26-
gtag('js', new Date());
27-
gtag('config', '${GA_ID}', {
28-
page_path: window.location.pathname,
29-
});`
30-
document.body.appendChild(script)
22+
id="gtag"
23+
dangerouslySetInnerHTML={{
24+
__html: `window.dataLayer = window.dataLayer || [];
25+
function gtag(){dataLayer.push(arguments);}
26+
gtag('js', new Date());
27+
gtag('config', '${GA_ID}', {
28+
page_path: window.location.pathname,
29+
});`,
3130
}}
3231
/>
3332
</>
3433
)}
35-
<Script
36-
strategy="beforeInteractive"
37-
src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"
38-
integrity="sha512-q583ppKrCRc7N5O0n2nzUiJ+suUv7Et1JGels4bXOaMFQcamPk9HjdUknZuuFjBNs7tsMuadge5k9RzdmO+1GQ=="
39-
crossOrigin="anonymous"
40-
/>
4134
</>
4235
)
4336
}

‎pages/category/[categoryId]/page/[pageNumber].tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'
2-
import Head from 'next/head'
32

43
import BlogListLayout, { BlogListLayoutProps } from '~/src/components/BlogListLayout/BlogListLayout'
5-
import { OG_TITLE, returnTitle } from '~/src/utils/meta'
4+
import { Head } from '~/src/components/Head'
65
import { getBlogs, getCategories, getGlobalContents, limit } from '~/src/utils/microCMS/getContents'
76

87
export const getAllCategoryPagePaths = async () => {
@@ -46,16 +45,13 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
4645
}
4746

4847
const PagingPage: NextPage<Props> = (props) => {
49-
const title = returnTitle(
50-
props.currentPage ? `${props.selectedCategory?.name ?? ''} ${props.currentPage}ページ目の記事一覧` : undefined
51-
)
52-
5348
return (
5449
<>
55-
<Head>
56-
<title>{title}</title>
57-
<meta key={OG_TITLE} property={OG_TITLE} content={title} />
58-
</Head>
50+
<Head
51+
title={
52+
props.currentPage ? `${props.selectedCategory?.name ?? ''} ${props.currentPage}ページ目の記事一覧` : undefined
53+
}
54+
/>
5955
<BlogListLayout {...props} />
6056
</>
6157
)

‎pages/index.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import type { GetStaticProps, NextPage } from 'next'
2-
import Head from 'next/head'
32

43
import BlogListLayout, { BlogListLayoutProps } from '~/src/components/BlogListLayout/BlogListLayout'
5-
import { OG_TITLE, returnTitle } from '~/src/utils/meta'
4+
import { Head } from '~/src/components/Head'
65
import { getGlobalContents } from '~/src/utils/microCMS/getContents'
76

87
type Props = BlogListLayoutProps
@@ -15,15 +14,10 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
1514
}
1615
}
1716

18-
const title = returnTitle()
19-
2017
const IndexPage: NextPage<Props> = (props) => {
2118
return (
2219
<>
23-
<Head>
24-
<title>{title}</title>
25-
<meta key={OG_TITLE} property={OG_TITLE} content={title} />
26-
</Head>
20+
<Head />
2721
<BlogListLayout {...props} />
2822
</>
2923
)

‎pages/page/[pageNumber].tsx‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'
2-
import Head from 'next/head'
32

4-
import BlogListLayout, { BlogListLayoutProps } from '~/src/components/BlogListLayout/BlogListLayout'
5-
import { OG_TITLE, returnTitle } from '~/src/utils/meta'
3+
import { BlogListLayout } from '~/src/components/BlogListLayout'
4+
import { BlogListLayoutProps } from '~/src/components/BlogListLayout/BlogListLayout'
5+
import { Head } from '~/src/components/Head'
66
import { getGlobalContents } from '~/src/utils/microCMS/getContents'
77

88
export const getAllPagePaths = async () => {
@@ -39,14 +39,9 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
3939
}
4040

4141
const PagingPage: NextPage<Props> = (props) => {
42-
const title = returnTitle(props.currentPage ? `${props.currentPage}ページ目の記事一覧` : undefined)
43-
4442
return (
4543
<>
46-
<Head>
47-
<title>{title}</title>
48-
<meta key={OG_TITLE} property={OG_TITLE} content={title} />
49-
</Head>
44+
<Head title={props.currentPage ? `${props.currentPage}ページ目の記事一覧` : undefined} />
5045
<BlogListLayout {...props} />
5146
</>
5247
)

‎pages/search/index.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import { MicroCMSListResponse } from 'microcms-js-sdk'
22
import type { GetStaticProps, NextPage } from 'next'
3-
import Head from 'next/head'
43
import { useRouter } from 'next/router'
54
import useSWR from 'swr'
65

76
import { BlogList } from '~/src/components/BlogList'
7+
import { Head } from '~/src/components/Head'
88
import { Layout } from '~/src/components/Layout'
99
import { LayoutProps } from '~/src/components/Layout/Layout'
1010
import { Search } from '~/src/components/Search'
1111
import styles from '~/src/styles/pages/search.module.css'
1212
import { Blog } from '~/src/types/microCMS/Blog'
13-
import { OG_TITLE, returnTitle } from '~/src/utils/meta'
1413
import { getGlobalContents } from '~/src/utils/microCMS/getContents'
1514

1615
type Props = LayoutProps
@@ -23,8 +22,6 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
2322
}
2423
}
2524

26-
const title = returnTitle('検索結果')
27-
2825
const SearchPage: NextPage<Props> = (props) => {
2926
const router = useRouter()
3027
const { data, error } = useSWR<MicroCMSListResponse<Blog>>(`/api/search?q=${router.query.q}`, (url) =>
@@ -38,10 +35,7 @@ const SearchPage: NextPage<Props> = (props) => {
3835

3936
return (
4037
<>
41-
<Head>
42-
<title>{title}</title>
43-
<meta key={OG_TITLE} property={OG_TITLE} content={title} />
44-
</Head>
38+
<Head title="検索結果" />
4539
<Layout {...props}>
4640
<Search isShowText={false} />
4741
{data === undefined ? (

‎scripts/generate-rss-feed.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
11
import RSS from 'rss'
22

3-
import { description, returnTitle, SITE_URL } from '~/src/utils/meta'
43
import { getGlobalContents } from '~/src/utils/microCMS/getContents'
54

5+
import { title, description } from '../src/components/Head/Head';
6+
7+
const site_url = process.env.NEXT_PUBLIC_SITE_URL
8+
9+
if (site_url === undefined) {
10+
throw Error('envファイルにNEXT_PUBLIC_SITE_URLを設定してください。')
11+
}
12+
613
const generateFeedXml = async () => {
714
const feed = new RSS({
8-
title: returnTitle(),
15+
title,
916
description,
10-
feed_url: `${SITE_URL}/feed.xml`,
11-
site_url: SITE_URL,
17+
feed_url: `${site_url}/feed.xml`,
18+
site_url,
1219
language: 'ja',
1320
})
1421

1522
const { contents } = await getGlobalContents()
1623
contents.forEach((content) => {
1724
feed.item({
18-
title: returnTitle(content.title),
25+
title: `${content.title} | ${title}`,
1926
description: content.description,
2027
date: content.publishedAt ?? content.createdAt,
21-
url: `${SITE_URL}/${content.id}`,
28+
url: `${site_url}/${content.id}`,
2229
})
2330
})
2431

‎src/components/Banner/Banner.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ type ContainerProps = {
1111

1212
type Props = ContainerProps
1313

14-
const Component: React.VFC<Props> = ({ banner, id }) => (
14+
const Component: React.FC<Props> = ({ banner, id }) => (
1515
<div className={styles.wrapper}>
1616
<a
1717
href={`${banner.url}?utm_source=CTA&utm_medium=content-text&utm_campaign=${id}-03`}
@@ -35,7 +35,7 @@ const Component: React.VFC<Props> = ({ banner, id }) => (
3535
</div>
3636
)
3737

38-
const Container: React.VFC<ContainerProps> = (props) => {
38+
const Container: React.FC<ContainerProps> = (props) => {
3939
return <Component {...props} />
4040
}
4141

0 commit comments

Comments
 (0)