Blogの仕組みをまるっと入れ替えてみた!
Blogの仕組みをまるっと入れ替えてみた!
Tags
Next.js Notion Starter Kit
Next.js
React.js
Notion
Blog
Web Dev
Published
Aug 15, 2021
📌
Notion APIが発表されてさ、APIができるまでのつなぎで作られていたのが多かったからさ、エラーだらけでさ、サクッと入れ替えた。 サクッとは入れ替えられていないけど...

エラーだらけ...

前に使った notion-blog でエラーが出まくってるし、どうしたものかと調べていたら、Notion APIが発表されたことでNotionからデータ取得ができなくなったりしていることが影響みたいな感じ。 更新もされる様子もないし自分ではどうしようもできないわって思って入れ替えた。
どうやったらエラーが出ないようにできるかなあ?と調べていたときに見つけた Next.js Notion Starter Kit に入れ替えた!

GTMを入れようと思って調べた

前に入れた時よりはいろいろなことが分かってきたからもう一度入れ方を調べてみたら GitHub の Next.js で現在進行系でなにかが行われている様子だった。(よく分かってないけどな!w)
だもんで、使うためには色々と最新の状態にしておいた方が良いのかな?と思って作業中のディレクトリをコピーしてテストディレクトリを作って Next.js のバージョンアップをしてみた。 (コピーをとって作業するところが成長していると思う!\(^o^)/)

React & Next.js のアップグレード

アップグレードの方法も知らないからググるでしょ。親切な人がいるのよね。
Next.js10から最新のNext.js11へのアップグレード方法を解説!Reactエンジニアがサンプルソースを交え解説! | Ragate ブログ
こんにちは! 世界的にシェア数が多く開発が盛んな NextJS は、早いサイクルでメジャーバージョンがアップデートされます。最新バージョンでは常に従来の開発課題を解決するソリューションが提供されるので、ぜひ新しいバージョンでの開発に取り組みたいところです。 本記事では、Next.js10 から最新の Next .js11 へのアップグレード方法をReactJS エンジニアが紹介・解説いたします。 Next.js10 の開発プロジェクトに携わっているヒト Web アプリケーションに対する基本的な知識を持っているヒト React を使った開発経験があるヒト 2021年6月16日に Next.js のバージョン11がリリースされました。 本記事では Next.js10 から最新の Next.js11 へのアップロード方法を詳しく解説していきたいと思います。 最新の Next.js のアップデート内容については、 こちらの記事 で詳しく解説しているので、ぜひ併せて参照してみてください。 Next.js をバージョン10からバージョン11にアップグレードする具体的な方法を紹介していきます。 ほとんどのアプリケーションでは最新バージョンの React を使用していて、 Next.js のバージョン11では React の最新バージョンである17.0.2に更新されています。 そのため、 Next.js をバージョン10からバージョン11にアップグレードする前に React を最新バージョンへとアップグレードする必要があります。 React を最新バージョンへアップグレードするには、下記のいずれかのコマンドを実行します。 npm を使用する場合 npm install react@latest
Next.js をアップグレードするには、まずは React をアップグレードしないといけないんだって。 ググったときには複数ページ確認しないとだめだよね。他のところでは Next.js だけのアップグレードの方法しか書いてなかったりしてたし。
で、yarn dev してみるとさ案の定エラー出んの。コピー取っといて良かった。
Error: `future.webpack5` in `next.config.js` has moved to the top level `webpack5` flag https://nextjs.org/docs/messages/future-webpack5-moved-to-webpack5
おそらく・・・URLの先の対応すればいいのね?
module.exports = withBundleAnalyzer({
  images: {
    domains: ['pbs.twimg.com']
  },
  future: {
    webpack5: true
  }
})
変更前
から
module.exports = withBundleAnalyzer({
  images: {
    domains: ['pbs.twimg.com']
  },
    webpack5: true
})
変更後
に書き換えて yarn dev したらOKだった。
後、ついでに build したときにバージョンエラーらしきものが出るから package.json にかかれているバージョンとインストールしている node.js のバージョンが違うから出てるのかなと思ってアップデートしようと思ったら脱線...
Warning: Due to "engines": { "node": ">=10" } in your `package.json` file, the Node.js Version defined in your Project Settings ("14.x") will not apply. Learn More: http://vercel.link/node-version
nvm install v15.0.1 して yarn build したら コマンド 'yarn' が見つかりません。次の方法でインストールできます: って言われちゃった。何で?
よく分かんないけど npm install -g yarn してと。ググってたら脆弱性のあるパッケージを更新した方がいいって出てきたら yarn audit して確認して yarn upgrade してみた。
で、私ってば何をしようとしてたんだっけ?あれ?また package-lock.json ができてる!私って何したっけ?w あー、 npm install -g yarn したらか。
そうそう、アップデートは無事にできて、yarn build したら下のエラーが出てきた。 エラー内容を検索すると対応方法っぽいのを GitHub で見つけたので関係がありそうなところをちょこちょこ修正して yarn build したらエラーは出たけどできた😆
$ yarn build
yarn run v1.22.11
$ next build
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
error - ESLint: Cannot read config file: ~/nextjs-notion-starter-kit-test/node_modules/eslint-config-prettier/standard.js Error: "prettier/standard" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21 Referenced from: ~/nextjs-notion-starter-kit-test/.eslintrc
info  - Creating an optimized production build
info  - Compiled successfully

> Build error occurred
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ~/nextjs-notion-starter-kit-test/node_modules/static-tweets/node_modules/unist-util-visit/index.js
require() of ES modules is not supported.
require() of ~/nextjs-notion-starter-kit-test/node_modules/static-tweets/node_modules/unist-util-visit/index.js from ~/nextjs-notion-starter-kit-test/node_modules/static-tweets/build/cjs/markdown/rehype-tweet.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from ~/nextjs-notion-starter-kit-test/node_modules/static-tweets/node_modules/unist-util-visit/package.json.

    at new NodeError (node:internal/errors:258:15)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1100:13)
    at Module.load (node:internal/modules/cjs/loader:948:32)
    at Function.Module._load (node:internal/modules/cjs/loader:789:14)
    at Module.require (node:internal/modules/cjs/loader:972:19)
    at require (node:internal/modules/cjs/helpers:88:18)
    at Object.<anonymous> (~/nextjs-notion-starter-kit-test/node_modules/static-tweets/build/cjs/markdown/rehype-tweet.js:4:26)
    at Module._compile (node:internal/modules/cjs/loader:1083:30)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:10)
    at Module.load (node:internal/modules/cjs/loader:948:32) {
  type: 'Error',
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
出たエラー
$ yarn build
yarn run v1.22.11
$ next build
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
error - ESLint: Cannot read config file: ~/nextjs-notion-starter-kit-test/node_modules/eslint-config-prettier/standard.js Error: "prettier/standard" has been merged into "prettier" in eslint-config-prettier 8.0.0. See: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21 Referenced from: ~/nextjs-notion-starter-kit-test/.eslintrc
info  - Creating an optimized production build
info  - Compiled successfully
エラー出たけどできたw
あれ?何やってたんだっけ?
もう、色々となにをやっているのかも分からなくなってきたのでアップデートは中止! おとなしくアップデートされるのを待とうw