Skip to content

Commit c06d3c2

Browse files
committed
next11対応
1 parent 5223274 commit c06d3c2

File tree

13 files changed

+1901
-4527
lines changed

13 files changed

+1901
-4527
lines changed

.eslintrc.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,9 @@ module.exports = {
77
extends: [
88
'eslint:recommended',
99
'plugin:@typescript-eslint/recommended',
10-
'plugin:react/recommended',
11-
'plugin:react-hooks/recommended',
12-
'plugin:jsx-a11y/recommended',
13-
'plugin:import/typescript',
10+
'next',
1411
// 競合を避けるため、prettierは一番最後に書く
1512
'plugin:prettier/recommended',
16-
'prettier/@typescript-eslint',
1713
],
1814
globals: {
1915
Atomics: 'readonly',
@@ -38,7 +34,7 @@ module.exports = {
3834
},
3935
},
4036
},
41-
plugins: ['jsx-a11y', 'import'],
37+
plugins: [],
4238
rules: {
4339
// prettier の設定
4440
'prettier/prettier': [
@@ -103,5 +99,7 @@ module.exports = {
10399
'react/destructuring-assignment': 'off',
104100
// console.errorを許容する
105101
'no-console': ['error', { allow: ['warn', 'error'] }],
102+
// next/imageを使わないことを許容する
103+
'@next/next/no-img-element': 0,
106104
},
107105
}

.husky/pre-commit

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#!/bin/sh
2+
. "$(dirname "$0")/_/husky.sh"
3+
4+
yarn lint-staged

lib/$path.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
/* eslint-disable */
2+
// prettier-ignore
23
export const pagesPath = {
34
$404: {
45
$url: (url?: { hash?: string }) => ({ pathname: '/404' as const, hash: url?.hash })
@@ -32,4 +33,5 @@ export const pagesPath = {
3233
$url: (url?: { hash?: string }) => ({ pathname: '/' as const, hash: url?.hash })
3334
}
3435

36+
// prettier-ignore
3537
export type PagesPath = typeof pagesPath

next-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
/// <reference types="next" />
22
/// <reference types="next/types/global" />
3+
/// <reference types="next/image-types/global" />

next.config.js

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
11
const withPlugins = require('next-compose-plugins')
2-
const optimizedImages = require('next-optimized-images')
32
const bundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' })
43

54
const basePath = process.env.NEXT_PUBLIC_BASE_PATH
65

7-
module.exports = withPlugins(
8-
[
9-
[
10-
optimizedImages,
11-
{
12-
imagesPublicPath: `${basePath}/_next/static/images/`,
13-
imagesName: '[name][contenthash].[ext]',
14-
responsive: {
15-
adapter: require('responsive-loader/sharp'),
16-
},
17-
},
18-
],
19-
[bundleAnalyzer],
20-
],
21-
{
22-
reactStrictMode: true,
23-
future: {
24-
webpack5: true,
25-
strictPostcssConfiguration: true,
26-
},
27-
basePath,
28-
trailingSlash: true,
29-
}
30-
)
6+
const config = {
7+
reactStrictMode: true,
8+
future: {
9+
strictPostcssConfiguration: true,
10+
},
11+
basePath,
12+
trailingSlash: true,
13+
images: {
14+
loader: 'imgix',
15+
path: '',
16+
},
17+
}
18+
19+
module.exports = process.env.ANALYZE ? withPlugins([[bundleAnalyzer]], config) : config

package.json

Lines changed: 38 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nextjs-microcms-blog",
3-
"version": "1.0.0",
3+
"version": "2.0.0",
44
"private": true,
55
"scripts": {
66
"analyze": "ANALYZE=true yarn build",
@@ -12,79 +12,63 @@
1212
"start": "next start",
1313
"test": "jest",
1414
"fix": "prettier --write './**/*.{js,jsx,ts,tsx}'",
15-
"lint": "eslint . --cache",
16-
"lint:fix": "eslint . --cache --fix",
17-
"tsc": "tsc"
18-
},
19-
"husky": {
20-
"hooks": {
21-
"pre-commit": "lint-staged"
22-
}
15+
"lint": "next lint",
16+
"lint:fix": "next lint --fix",
17+
"tsc": "tsc",
18+
"prepare": "husky install"
2319
},
2420
"lint-staged": {
2521
"*.{ts,tsx}": [
26-
"eslint --fix",
22+
"next lint --fix",
2723
"prettier --write"
2824
]
2925
},
3026
"dependencies": {
31-
"@aspida/axios": "^1.6.3",
27+
"@aspida/axios": "^1.7.1",
3228
"axios": "^0.21.1",
33-
"dayjs": "^1.10.4",
34-
"highlight.js": "^10.7.2",
35-
"jsdom": "^16.5.3",
36-
"next": "^10.0.6",
37-
"react": "^17.0.1",
38-
"react-dom": "^17.0.1",
29+
"dayjs": "^1.10.6",
30+
"highlight.js": "^11.0.0",
31+
"microcms-richedit-processer": "^1.0.1",
32+
"next": "^11.0.1",
33+
"react": "^17.0.2",
34+
"react-dom": "^17.0.2",
3935
"react-scroll": "^1.8.2",
4036
"react-use": "^17.2.4",
4137
"rss": "^1.2.2",
4238
"swr": "^0.5.6"
4339
},
4440
"devDependencies": {
45-
"@babel/core": "^7.12.10",
46-
"@next/bundle-analyzer": "^10.1.1",
47-
"@testing-library/jest-dom": "^5.11.10",
48-
"@testing-library/react": "^11.2.5",
49-
"@testing-library/react-hooks": "^5.1.1",
50-
"@types/jsdom": "^16.2.10",
41+
"@babel/core": "^7.14.6",
42+
"@next/bundle-analyzer": "^11.0.1",
43+
"@testing-library/jest-dom": "^5.14.1",
44+
"@testing-library/react": "^12.0.0",
45+
"@testing-library/react-hooks": "^7.0.1",
46+
"@types/jsdom": "^16.2.13",
5147
"@types/node": "^14.14.37",
52-
"@types/react": "^17.0.3",
53-
"@types/react-scroll": "^1.8.2",
54-
"@types/rss": "^0.0.28",
55-
"@typescript-eslint/eslint-plugin": "^4.20.0",
56-
"@typescript-eslint/parser": "^4.20.0",
57-
"babel-jest": "^26.6.3",
58-
"dotenv": "^9.0.0",
59-
"eslint": "^7.23.0",
60-
"eslint-config-prettier": "^7.2.0",
61-
"eslint-plugin-import": "^2.22.1",
62-
"eslint-plugin-jsx-a11y": "^6.4.1",
48+
"@types/react": "^17.0.14",
49+
"@types/react-scroll": "^1.8.3",
50+
"@types/rss": "^0.0.29",
51+
"@typescript-eslint/eslint-plugin": "^4.28.3",
52+
"@typescript-eslint/parser": "^4.28.3",
53+
"babel-jest": "^27.0.6",
54+
"dotenv": "^10.0.0",
55+
"eslint": "^7.30.0",
56+
"eslint-config-next": "^11.0.1",
57+
"eslint-config-prettier": "^8.3.0",
6358
"eslint-plugin-prettier": "^3.3.1",
64-
"eslint-plugin-react": "^7.23.1",
65-
"eslint-plugin-react-hooks": "^4.2.0",
66-
"globby": "^11.0.3",
67-
"husky": "^4.3.8",
68-
"imagemin-gifsicle": "^7.0.0",
69-
"imagemin-mozjpeg": "^9.0.0",
70-
"imagemin-pngquant": "^9.0.2",
71-
"imagemin-svgo": "^9.0.0",
72-
"jest": "^26.6.3",
73-
"jest-watch-typeahead": "^0.6.1",
74-
"lint-staged": "^10.5.4",
75-
"lqip-loader": "^2.2.1",
59+
"globby": "^11.0.4",
60+
"husky": "^7.0.1",
61+
"jest": "^27.0.6",
62+
"jest-watch-typeahead": "^0.6.4",
63+
"lint-staged": "^11.0.1",
7664
"next-compose-plugins": "^2.2.1",
77-
"next-optimized-images": "^2.6.2",
7865
"npm-run-all": "^4.1.5",
79-
"pathpida": "^0.14.0",
66+
"pathpida": "^0.15.2",
67+
"postcss": "^8.3.5",
8068
"postcss-custom-properties": "^11.0.0",
8169
"postcss-nested": "^5.0.5",
82-
"prettier": "^2.2.1",
70+
"prettier": "^2.3.2",
8371
"react-test-renderer": "^17.0.2",
84-
"responsive-loader": "^2.3.0",
85-
"sharp": "^0.28.0",
86-
"ts-loader": "^8.1.0",
87-
"typescript": "^4.2.3",
88-
"webp-loader": "^0.6.0"
72+
"typescript": "^4.3.5"
8973
}
9074
}

pages/[slug].tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params, preview, p
6565
headers,
6666
query: {
6767
depth: 2,
68-
draftKey: preview ? previewData.draftKey : undefined,
68+
draftKey: preview ? (previewData as { [key: string]: string }).draftKey : undefined,
6969
},
7070
})
7171
const { body, toc } = processingDom(content.body)

pages/_app.tsx

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,43 @@ import '~/src/styles/colors.css'
33
import 'highlight.js/styles/hybrid.css'
44

55
import { AppProps } from 'next/app'
6+
import Script from 'next/script'
67

78
import usePageView from '~/src/hooks/usePageView'
9+
import { GA_ID } from '~/src/utils/gtag'
810

911
function MyApp({ Component, pageProps }: AppProps) {
1012
usePageView()
1113

12-
return <Component {...pageProps} />
14+
return (
15+
<>
16+
<Component {...pageProps} />
17+
{GA_ID !== undefined && (
18+
<>
19+
<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)
31+
}}
32+
/>
33+
</>
34+
)}
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+
/>
41+
</>
42+
)
1343
}
1444

1545
export default MyApp

pages/_document.tsx

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,15 @@
11
import Document, { Html, Head, Main, NextScript } from 'next/document'
22

3-
import { GA_ID } from '~/src/utils/gtag'
4-
53
class MyDocument extends Document {
64
render() {
75
return (
86
<Html lang="ja">
97
<Head>
108
<link rel="shortcut icon" href={`${process.env.NEXT_PUBLIC_BASE_PATH}/favicon.png`} type="image/png" />
11-
{GA_ID !== undefined && (
12-
<>
13-
<script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`} />
14-
<script
15-
dangerouslySetInnerHTML={{
16-
__html: `
17-
window.dataLayer = window.dataLayer || [];
18-
function gtag(){dataLayer.push(arguments);}
19-
gtag('js', new Date());
20-
gtag('config', '${GA_ID}', {
21-
page_path: window.location.pathname,
22-
});`,
23-
}}
24-
/>
25-
</>
26-
)}
279
</Head>
2810
<body>
2911
<Main />
3012
<NextScript />
31-
<script
32-
src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"
33-
integrity="sha512-q583ppKrCRc7N5O0n2nzUiJ+suUv7Et1JGels4bXOaMFQcamPk9HjdUknZuuFjBNs7tsMuadge5k9RzdmO+1GQ=="
34-
crossOrigin="anonymous"
35-
async
36-
></script>
3713
</body>
3814
</Html>
3915
)

pages/api/preview.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NextApiRequest, NextApiResponse } from 'next'
33
import { apiClient } from '~/src/utils/apiClient'
44
import { headers } from '~/src/utils/microCMSHeaders'
55

6-
export default async (req: NextApiRequest, res: NextApiResponse) => {
6+
const preview = async (req: NextApiRequest, res: NextApiResponse) => {
77
const { draftKey, slug } = req.query
88
if (typeof draftKey !== 'string' || typeof slug !== 'string') {
99
res.status(404).end()
@@ -20,3 +20,5 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
2020
res.writeHead(307, { Location: `/${slug}` })
2121
res.end('Preview mode enabled')
2222
}
23+
24+
export default preview

0 commit comments

Comments
 (0)