microcms-js-sdkを使った実装に変更

Author: dc7290

.eslintrc.js

@@ -7,10 +7,9 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'next',
     'next/core-web-vitals',
     // 競合を避けるため、prettierは一番最後に書く
-    'plugin:prettier/recommended',
+    'prettier',
   ],
   globals: {
     Atomics: 'readonly',
@@ -37,24 +36,11 @@ module.exports = {
   },
   plugins: [],
   rules: {
-    // prettier の設定
-    'prettier/prettier': [
-      'error',
-      {
-        trailingComma: 'es5',
-        tabWidth: 2,
-        semi: false,
-        singleQuote: true,
-        printWidth: 120,
-      },
-    ],
     // React Hooks のための設定
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
     // prop types を使っていないので off
     'react/prop-types': 'off',
-    // Next.js では React を import しなくてもよいので off にする
-    'react/react-in-jsx-scope': 'off',
     // 関数の引数や返り値に必ず型をつけるルールを off にする
     // アプリケーションをより堅牢にしたい場合は、このルールを on にしてください
     '@typescript-eslint/explicit-module-boundary-types': 'off',

README.md

@@ -1,4 +1,4 @@
-# 公式microCMSブログ
+# 公式 microCMS ブログ
 
 サイト: https://blog.microcms.io/
 ソースコード: https://github.com/wantainc/microcms-blog
@@ -111,22 +111,22 @@ type: オブジェクト形式
 
 ## 環境変数
 
-プロジェクトルートに`.env.local`ファイルを作成し、以下の項目を設定してください。
+プロジェクトルートに`.env`ファイルを作成し、以下の項目を設定してください。
 
-- API_KEY（microCMS の API キー）
-- SERVICE_ID（microCMS のサービス ID）
+- NEXT_PUBLIC_API_KEY（microCMS の API キー）
+- NEXT_PUBLIC_SERVICE_ID（microCMS のサービス ID）
 - NEXT_PUBLIC_GOOGLE_ANALYTICS_ID（Google Analytics の ID）
 - NEXT_PUBLIC_SITE_URL
 - NEXT_PUBLIC_BASE_PATH（BasePath が'/'なら空白で大丈夫です）
 
 例:
 
-```
+```env
 API_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
 SERVICE_ID=your-service-id
 NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=G-xxxxxxxxxx
 NEXT_PUBLIC_SITE_URL=https://blog.microcms.io
-NEXT_PUBLIC_BASE_PATH=/test
+NEXT_PUBLIC_BASE_PATH=/test(or NEXT_PUBLIC_BASE_PATH=)
 ```
 
 ## 開発方法

aspida.config.js

@@ -1,3 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

jest.config.js

@@ -1,17 +1,16 @@
-const withPlugins = require('next-compose-plugins')
 const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' })
 
 const basePath = process.env.NEXT_PUBLIC_BASE_PATH
 
-module.exports = withPlugins([[withBundleAnalyzer]], {
+module.exports = withBundleAnalyzer({
   reactStrictMode: true,
-  future: {
-    strictPostcssConfiguration: true,
-  },
   basePath,
   trailingSlash: true,
   images: {
     loader: 'imgix',
     path: '',
   },
+  eslint: {
+    dirs: ['pages', 'src'],
+  },
 })

next-env.d.ts

@@ -6,11 +6,9 @@
     "analyze": "ANALYZE=true yarn build",
     "dev": "run-p dev:*",
     "dev:next": "next dev",
-    "dev:path": "pathpida --watch",
-    "dev:api": "aspida --watch",
-    "build": "pathpida && aspida && next build",
+    "dev:path": "pathpida --output src/utils --watch",
+    "build": "pathpida --output src/utils && next build",
     "start": "next start",
-    "test": "jest",
     "fix": "prettier --write './**/*.{js,jsx,ts,tsx}'",
     "lint-staged": "lint-staged",
     "lint": "next lint",
@@ -25,50 +23,38 @@
     ]
   },
   "dependencies": {
-    "@aspida/axios": "1.7.1",
-    "axios": "0.21.1",
-    "dayjs": "1.10.6",
-    "highlight.js": "11.2.0",
-    "microcms-richedit-processer": "1.0.3",
-    "next": "11.0.1",
+    "dayjs": "1.10.7",
+    "highlight.js": "11.4.0",
+    "microcms-js-sdk": "2.0.0",
+    "microcms-richedit-processer": "1.0.4",
+    "next": "12.0.8",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-scroll": "1.8.3",
-    "react-use": "17.2.4",
+    "react-scroll": "1.8.4",
+    "react-use": "17.3.2",
     "rss": "1.2.2",
-    "swr": "0.5.6"
+    "swr": "1.1.2"
   },
   "devDependencies": {
-    "@babel/core": "7.15.0",
-    "@next/bundle-analyzer": "11.0.1",
-    "@testing-library/jest-dom": "5.14.1",
-    "@testing-library/react": "12.0.0",
-    "@testing-library/react-hooks": "7.0.1",
-    "@types/react": "17.0.17",
+    "@next/bundle-analyzer": "12.0.8",
+    "@types/prettier": "^2.4.3",
+    "@types/react": "17.0.38",
     "@types/react-scroll": "1.8.3",
     "@types/rss": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "4.29.1",
-    "@typescript-eslint/parser": "4.29.1",
-    "babel-jest": "27.0.6",
-    "dotenv": "10.0.0",
-    "eslint": "7.32.0",
-    "eslint-config-next": "11.0.1",
+    "@typescript-eslint/eslint-plugin": "5.10.0",
+    "@typescript-eslint/parser": "5.10.0",
+    "eslint": "8.7.0",
+    "eslint-config-next": "12.0.8",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-prettier": "3.4.0",
-    "globby": "11.0.4",
-    "husky": "7.0.1",
-    "jest": "27.0.6",
-    "jest-watch-typeahead": "0.6.4",
-    "lint-staged": "11.1.2",
-    "next-compose-plugins": "2.2.1",
-    "next-transpile-modules": "8.0.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "husky": "7.0.4",
+    "lint-staged": "12.2.2",
     "npm-run-all": "4.1.5",
-    "pathpida": "0.15.4",
-    "postcss": "8.3.6",
-    "postcss-custom-properties": "11.0.0",
+    "pathpida": "0.17.0",
+    "postcss": "8.4.5",
+    "postcss-custom-properties": "12.1.3",
     "postcss-nested": "5.0.6",
-    "prettier": "2.3.2",
-    "react-test-renderer": "17.0.2",
-    "typescript": "4.3.5"
+    "prettier": "2.5.1",
+    "typescript": "4.5.5"
   }
 }

next.config.js

@@ -4,13 +4,11 @@ import Head from 'next/head'
 
 import { BlogDetailLayout } from '~/src/components/BlogDetailLayout'
 import { BlogDetailLayoutProps } from '~/src/components/BlogDetailLayout/BlogDetailLayout'
-import { apiClient } from '~/src/utils/apiClient'
-import { getContents } from '~/src/utils/getContents'
 import { DESCRIPTION, OG_DESCRIPTION, OG_IMAGE, OG_TITLE, returnTitle } from '~/src/utils/meta'
-import { headers } from '~/src/utils/microCMSHeaders'
+import { getBlog, getGlobalContents } from '~/src/utils/microCMS/getContents'
 
 export const getAllSlugPaths = async () => {
-  const { contents } = await getContents()
+  const { contents } = await getGlobalContents()
   const paths = contents.map((content) => ({
     params: {
       slug: content.id,
@@ -42,14 +40,11 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params, preview, p
   if (params === undefined || typeof params.slug !== 'string')
     throw Error('pagesのディレクトリ構造かファイル名が間違っています。')
 
-  const contents = await getContents()
-  const content = await apiClient.blog._slug(params.slug).$get({
-    headers,
-    query: {
-      depth: 2,
-      draftKey: preview ? (previewData as { [key: string]: string }).draftKey : undefined,
-    },
-  })
+  const contents = await getGlobalContents()
+  const content = await getBlog({
+    depth: 2,
+    draftKey: preview ? (previewData as { [key: string]: string }).draftKey : undefined,
+  })(params.slug)
   const { body, toc } = await processingDom(content.body)
   content.body = body
 

package.json

@@ -1,7 +1,6 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 
-import { apiClient } from '~/src/utils/apiClient'
-import { headers } from '~/src/utils/microCMSHeaders'
+import { getBlog } from '~/src/utils/microCMS/getContents'
 
 const preview = async (req: NextApiRequest, res: NextApiResponse) => {
   const { draftKey, slug } = req.query
@@ -10,7 +9,7 @@ const preview = async (req: NextApiRequest, res: NextApiResponse) => {
     return
   }
 
-  const data = await apiClient.blog._slug(slug).$get({ headers, query: { fields: 'id', draftKey } })
+  const data = await getBlog({ fields: 'id', draftKey })(slug)
 
   if (!data) {
     return res.status(401).json({ message: 'Invalid slug' })

pages/[slug].tsx

@@ -1,22 +1,15 @@
 import type { NextApiRequest, NextApiResponse } from 'next'
 
-import { Methods } from '~/src/api/blog'
-import { apiClient } from '~/src/utils/apiClient'
-import { headers } from '~/src/utils/microCMSHeaders'
+import { getBlogs } from '~/src/utils/microCMS/getContents'
 
-type Data = Methods['get']['resBody']
-
-const search = async (req: NextApiRequest, res: NextApiResponse<Data>) => {
+const search = async (req: NextApiRequest, res: NextApiResponse) => {
   if (typeof req.query.q !== 'string') {
     res.status(404).end()
     return
   }
 
-  const data = await apiClient.blog.$get({
-    headers,
-    query: {
-      q: req.query.q,
-    },
+  const data = await getBlogs({
+    q: req.query.q,
   })
 
   res.status(200).json({ ...data })