<p>こんばんは。</p><p>この度Next.js+ Vercel + TailwindCSS + microCMSの構成でブログを公開しましたので、ブログを公開するまでの手順をメモとして残しておきたいと思います。</p><p></p><h2 id="hf22588e3d7">そもそも</h2><h2 id="hcf83e1357e"></h2>

Next.js + Vercel + TailwindCSS + microCMS で自作ブログを無料で公開

<p>例えば、</p><pre><code>  let blogPVData = await fetch(
    `${
      process.env.NODE_ENV === &quot;development&quot;
        ? `http://${process.env.LOCALHOST}`
        : `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
    }/api/fetchGADataBlogPV?blogId=${id}`
  )
    .then((res) =&gt; res.json())
    .catch((err) =&gt; console.log(err));
  if (typeof blogPVData === &quot;undefined&quot;) {
    blogPVData = &quot;0&quot;;
  }</code></pre><p>みたいなコードがあったとき、デプロイ失敗する。ビルド時は本番の環境に対してapiを見に行くけど、ビルド次点ではapiが未作成だから？</p><p>こういうときどうすればいいの</p>

ビルド失敗

<p>めっちゃ手軽にできる対応。</p><p>ちゃんとした対応はもうちょいなんかやる必要ありそう。</p><p>globals.cssに、</p><pre><code>.embedly-embed {
  max-width: 100% !important;
}</code></pre><p>暫定的な対応としては十分。</p>

Next.js×microCMSのifameをレスポンシブ対応【暫定的に】

<p>基本的にはNextとReactをアップグレードすればいいんだけど、依存するその他のライブラリを先にアップグレードしないとエラーが止め処なく出てくる</p><p>そのためあくまで自分の場合の手順。</p><h2 id="h46ba0d4be4">関連パッケージとNextのアップグレード</h2><p>あとnodeのバージョンを18に上げた。</p><pre><code>
 1141  npm i iconoir-react@latest
 1152  npm i swr@latest 
 1153  npm i typescript@latest
 1154  npm i typewriter-effect@latest
 1155  npm i microcms-js-sdk@latest
 1157  npm i autoprefixer@latest
 1158  npm i postcss@latest
 1159  npm i react-icons@latest
 1164  npm i react@latest react-dom@latest
 1177  npm i react-modal@latest
 1178  npm i @types/react-modal@latest
 1179  npm i framer-motion@latest
 1180  npm i react-burger-menu@latest
 1181  npm i react@latest react-dom@latest
 1182  npm i framer-motion@latest
 1183  npm i next@latest
 1184  npm i @types/gtag.js
 1185  npm i @types/gtag.js@latest
 1186  npm i eslint@latest
 1187  npm i tailwindcss@latest
 1188  npm i react-use@latest
 1189  npm i @types/react-burger-menu@latest
 1190  rm -rf package-lock.json
 1191  rm -rf node_modules
 1192  npm i
 1193  npm run dev</code></pre><p>historyをただ載せているだけ。</p><pre><code>npm run dev

- error Nested Middleware is not allowed, found:
pages/_middleware
Please move your code to a single file at /middleware instead.
Read More - https://nextjs.org/docs/messages/nested-middleware</code></pre><p>でmiddlewareが <code>_middleware.js</code>になっているのがよくないらしいので修正。</p><p>ファイル名を<code>middleware.js</code>に変更し、場所もプロジェクトディレクトリ直下に置く。</p><h2 id="h503f60b648">&lt;Link&gt;コンポーネントで内部でaタグを使っている箇所を直す必要があった。</h2><pre><code>npx @next/codemod new-link .</code></pre><p>で一括で変更し、エラーが出ている箇所を修正。</p><h3 id="h305b9431b6">Image</h3><pre><code>npx @next/codemod next-image-to-legacy-image .</code></pre><p>でコミットした後、</p><pre><code>npx @next/codemod next-image-experimental .</code></pre><p>上記のせいか分からないが、なぜかtailwindの共通CSSが勝っている箇所があり、画像サイズが変になっていたので、</p><p>important指定で画像サイズを修正。</p><p></p>

Next.jsを12から13にしてみた

<ol><li>欲しい物をカゴに入れておく</li><li>買わないでおく</li><li>めっちゃお酒を飲む</li><li>ある日欲しい物が届いている</li><li>ほぼサンタ</li></ol><p></p><figure><img src="https://images.microcms-assets.io/assets/1ef38cd1a8134e5383b1fc743d10cffb/81028e19a9a542d892e6c67c889d58dc/IMG_3791.jpg" alt="" width="3024" height="4032"></figure>

サンタがきた

<p>色々やったけど、OGPを作成する過程でクライアントサイドでの処理が走るとだめっぽい。</p><p>例</p><pre><code>const Seo: React.FC&lt;Props&gt; = (props: Props) =&gt; {
  const { title, description } = props;
  
  const { locale } = useLocale();
  const ogTitle = locale === &quot;en&quot; ? &quot;englishTitle&quot; : &quot;jaTitle&quot;;
  
  return (
    &lt;Head&gt;
      &lt;meta property=&quot;og:title&quot; content={ogTitle} /&gt;
    &lt;/Head&gt;
  )
}</code></pre><p>→→→</p><p>_app.tsxでのuseEffectとかがよくなかったぽい？</p><pre><code>const [mounted, setMounted] = useState&lt;boolean&gt;(false);

useEffect(() =&gt; setMounted(true), []);

if (!mounted) {
    return null;
  }</code></pre><p>これを外すとなおった。けど、これが何だったのか思い出せない。</p><h2 id="h7da869be61">→ダークモードのためのmountedをapp.tsxで判定するように</h2><p>というコミットの際に追加していた。</p><p>ダークモード判定を初期表示で行う際に必要ぽい。これを外すと、</p><pre><code>Warning: Prop `className` did not match.Server: xxx
Warning: Prop `style` did not match.Server: xxx</code></pre><p>というエラーたちが出る。</p><p>これが出ている箇所を見るに、</p><pre><code>&lt;div
className={`text-left ${
  theme === &quot;light&quot; ? &quot;text-blue-500&quot; : &quot;text-blue-300&quot;
}`}
&gt;</code></pre><p>こういうところでthemeがサーバーサイドでは常にtrueなのに、クライアントではfalseになっている場合があるから。</p><p>useThemeでスタイルを出し分けるのを辞めて、</p><pre><code>&lt;div className={`text-left text-blue-500 dark:text-blue-300`}&gt;</code></pre><p>みたいな感じにすると大丈夫そう。</p><p>で、useThemeを使うところでは</p><pre><code>const [mounted, setMounted] = useState&lt;boolean&gt;(false);

useEffect(() =&gt; setMounted(true), []);

if (!mounted) {
    return null;
  }</code></pre><p>を入れる。</p>

[Next.js]OGPが適切に設定されない。ERROR: No card found (Card error)

<h2 id="h0e4e547ea0">pyenv </h2><pre><code class="language-shell">amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp) took 3m12s
❯ brew install pyenv

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp) took 3m12s
❯ pyenv -v
pyenv 2.3.22

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp)
❯ echo &apos;export PYENV_ROOT=&quot;$HOME/.pyenv&quot;&apos; &gt;&gt; ~/.zshrc

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp)
❯ echo &apos;export PATH=&quot;$PYENV_ROOT/bin:$PATH&quot;&apos; &gt;&gt; ~/.zshrc

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp)
❯ echo &apos;eval &quot;$(pyenv init -)&quot;&apos; &gt;&gt; ~/.zshrc

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp)
❯ source ~/.zshrc

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp)
❯ pyenv install 3.11.4

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp)
❯ pyenv global 3.11.4

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp)
❯ python --version
Python 3.11.4

</code></pre><h2 id="hfedac1c46d">venv</h2><pre><code>amanokokorotarou🙃 ~/Project/Python on ☁️  (jp)
❯ mkdir python-cassandra

amanokokorotarou🙃 ~/Project/Python on ☁️  (jp)
❯ cd python-cassandra/

amanokokorotarou🙃 ~/Project/Python/python-cassandra on ☁️  (jp)
❯ python -m venv .venv</code></pre><h1 style="text-align: start" id="h9e4f05b18d"><strong>Cassandra</strong></h1><pre><code>amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp)
❯ brew install cassandra

amanokokorotarou🙃 ~ via  v18.12.1 on ☁️  (jp) took 44s
❯ brew services start cassandra
==&gt; Successfully started `cassandra` (label: homebrew.mxcl.cassandra)</code></pre><h1 style="text-align: start" id="h99678a5629"><strong>cassandra-draiver</strong></h1><pre><code>amanokokorotarou🙃 ~/Project/Python/python-cassandra via 🐍 v3.11.4 (.venv) on ☁️  (jp)
❯ pip list
Package    Version
---------- -------
pip        23.1.2
setuptools 65.5.0

amanokokorotarou🙃 ~/Project/Python/python-cassandra via 🐍 v3.11.4 (.venv) on ☁️  (jp)
❯ pip install cassandra-driver
Collecting cassandra-driver
  Downloading cassandra_driver-3.28.0-cp311-cp311-macosx_11_0_arm64.whl (3.3 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 3.3/3.3 MB 7.1 MB/s eta 0:00:00
Collecting six&gt;=1.9 (from cassandra-driver)
  Downloading six-1.16.0-py2.py3-none-any.whl (11 kB)
Collecting geomet&lt;0.3,&gt;=0.1 (from cassandra-driver)
  Downloading geomet-0.2.1.post1-py3-none-any.whl (18 kB)
Collecting click (from geomet&lt;0.3,&gt;=0.1-&gt;cassandra-driver)
  Downloading click-8.1.4-py3-none-any.whl (98 kB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 98.2/98.2 kB 7.4 MB/s eta 0:00:00
Installing collected packages: six, click, geomet, cassandra-driver
Successfully installed cassandra-driver-3.28.0 click-8.1.4 geomet-0.2.1.post1 six-1.16.0</code></pre><p>cassandraに実際にデータを登録。</p><p></p><h2 id="h9c39912749">参考リスト</h2><ul><li><a href="https://prog-8.com/docs/python-env">https://prog-8.com/docs/python-env</a></li><li><a href="http://debugroom.github.io/doc/database/cassandra/install.html">http://debugroom.github.io/doc/database/cassandra/install.html</a></li><li><a href="https://self-development.info/%E3%80%90python%E3%80%91cassandra-driver%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/"><strong>【Python】cassandra-driverのインストール</strong></a><p></p></li></ul><p></p>

Mac Python Cassandraセットアップ

<p>結論、ブラウザのデフォルト言語をdefaultLocaleの言語と同じにしたら治った。</p><p>しかし、これはブラウザのデフォルト言語とdefaultLocaleの言語が違う人は永遠に謎のエラーがでるということを意味している気がする。</p><p>根本解決はまた考える。</p><pre><code>  i18n: {
    locales: [&quot;en&quot;, &quot;ja&quot;],
    defaultLocale: &quot;ja&quot;,
  },</code></pre><h3 id="hdaf32be438">出てたエラーたち</h3><pre><code>Uncaught (in promise) Error: Failed to preflight request</code></pre><pre><code>HEAD https://domain net::ERR_ABORTED 404</code></pre><h3 id="h527d33c5c1">起きていた現象</h3><ul><li>トップページ遷移時にコンソールでエラー出る</li><li>トップページから言語スイッチボタン押すとエラー吐いて機能しない</li><li>トップページからトップページへのリンク押すとエラー吐く</li></ul>

Next.jsのi18nとか関連でずっと変なCORSのエラー出てた

<pre><code class="language-shell">❯ npm i                   
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: use-media@1.4.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@&quot;^17.0.2&quot; from the root project
npm ERR!   peer react@&quot;&gt;=16.8 || ^17.0.0 || ^18.0.0&quot; from framer-motion@6.3.3
npm ERR!   node_modules/framer-motion
npm ERR!     framer-motion@&quot;^6.3.3&quot; from the root project
npm ERR!   11 more (iconoir-react, next, next-themes, react-burger-menu, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@&quot;^16.8.1&quot; from use-media@1.4.0
npm ERR! node_modules/use-media
npm ERR!   use-media@&quot;^1.4.0&quot; from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@&quot;^16.8.1&quot; from use-media@1.4.0
npm ERR!   node_modules/use-media
npm ERR!     use-media@&quot;^1.4.0&quot; from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/amanokokorotarou/.npm/_logs/2023-07-11T14_04_52_361Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/amanokokorotarou/.npm/_logs/2023-07-11T14_04_52_361Z-debug-0.log</code></pre><p><code>use-media</code>の依存しているReactのバージョンが低いらしい。</p><p>use-mediaは4年も更新されていない。use-mediaじゃないライブラリを使えないか模索。</p><p>ピンポイントの記事を発見。</p><p><a href="https://zenn.dev/someone7140/articles/1f2eaef6991e1f">【React】「streamich/use-media」の代替で「streamich/react-use」のuseMediaを使う</a></p>