ブログをNext.js14.1にアップデートしました

📅 2024-03-24

Maintenance

ブログをNext.js14.1にアップデートしました

Next.js

🔄 2024-03-25

14からどんどんstableになっていき使いやすくなり、アップデート作業もしやすくなってきました。

ブログを読むと、<Image>を使わずgetImageProps()というのがstableになってDarkモードとの切り替え方法が紹介されています。

ちょっとやってみたい気持ちもありましたが、既に実装されている部分に絞ってメンテナンスを進めていくのを優先したいので次回以降に持ち越すことにします。

GoogleAnalytics コンポネント

今回機能が追加されたのはthird partyのGoogle Analyticsコンポネントです。

https://nextjs.org/blog/next-14-1#other-improvements

yarn add @next/third-parties/google

Tarminal

gtag.jsは内部的なfetchになった

The GoogleAnalytics component can be used to include Google Analytics 4 to your page via the Google tag (gtag.js). By default, it fetches the original scripts after hydration occurs on the page.

GoogleAnalytics コンポネントは gtag.jsを介して Google Analytics 4 をページに含めるために使われます。

gtag.jsを手動でページに追加していたのを自動で処理できるようになったらしいです👀!!!!

よって、lib/gtag.jsはdelateです。

GoogleAnalytics コンポネントを設置する

例：

import { GoogleAnalytics } from '@next/third-parties/google'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  )
}

全てのroutesで使う場合は、layout.tsxの<body>タグの後に<GoogleAnalytics gaId="G-*****" />を加えます。

gaIdの値はserver-constants.jsで設定しているNEXT_PUBLIC_GA_TRACKING_IDの値を使っていつものようにシークレットにしときます。

const RootLayout = ({ children }: { children: React.ReactNode }) => (
  <html lang="ja" prefix="og: https://ogp.me/ns#">
    <body>
      .
      .
      .
    </body>
    {NEXT_PUBLIC_GA_TRACKING_ID ? (
      <GoogleAnalytics gaId={NEXT_PUBLIC_GA_TRACKING_ID} />
    ) : undefined}
  </html>
)

layout.tsx

eventによって測定する

記事下のSNSボタンを押した時に測定できるようになっていた<SocialButtons />のClickイベントの部分をsendGAEventを使って書き換えます。

例：

sendGAEvent({
  event: 'screen_view', // イベント名
  app_name: 'myAppName', // イベントパラメータのキーと値
  screen_name: 'Home' // イベントパラメータのキーと値
});

参照：

例を参考にしてイベント名とイベントパラメータのkeyとvalueを書くと以下のようになります。

<TwitterShareButton
        url={url}
        title={title}
        beforeOnClick={() =>
          sendGAEvent({
            event: 'share',
            method: 'twitter',
            contentType: 'article',
            itemId: id,
          })
        }
      >

components/social-button.tsx

この他のSNSボタン(facebook, pocket, hatena)も書き換えます。

もう使わなくなった部分を削除

components/google-analytics.tsxからimportして使っていた<GoogleAnalytics />を削除していきます。

app/page.tsx
app/blog/page.tsx
app/blog/[slug].tsx
app/blog/before/[date]/page.tsx
app/blog/tag/[tag]/page.tsx
app/blog/tag/[tag]/before/[date]/page.tsx

最後にcomponents/google-analytics.tsx自体を削除したら完成です✌(*^^*)

おわりに

公式ブログや公式ドキュメントが読みやすくなり、

メンテナンスもしやすくなってきました。

プログラミング力が上がったというより、

読める英単語が増えてきた影響が大きい気がします。

分かりにくい部分や、実際やってみたら遭遇したエラーなどはChatGPTに相談して助けてもらいました。

以下はそのログですw

Vercel deployにある日から「running checks」という項目が追加された。なぜ？
それ以降「Checks Failed」エラーになってる
実際vercel リンクも500エラーのままの状態：１月18日
ドメイン移管の日付けと一致するなら多分原因はこれ？：違う
HEROは動いてるから、とりあえず一旦projectごと削除して立ち上げ直した
頻繁にcommitしているDWBの方のprojectは残しておく
以降ChatGPTに相談
- ローカルでLintを実行し、エラーメッセージを伝える
- ESLintのバージョンが古いことが判明
- Updateをする
- yarn lockを一旦削除しinstallし直す
- ※ もしかするとGAのコードを削除したことによるESLintのスナップショットの不一致かもしれない？
- @typescript-eslint/no-var-requireはCommonJSのrequireをES6+のimportを奨励してる
- 動かないわけではないからこれはシカトして、yarn lint時のエラーメッセージを見てみると、使われていないコードを消すように指示がされてたから２つ消して、再度yarn lintを実行てみた
- 見事通過
- ちがう。yarn eslintだった。これでやったら５つエラー。
- eslintrc.jsonでエラーになってる部分を除外 ※ プロジェクトとは違う動きなため
- 通過
- push
- rebase
- GitHubのJestがエラーで、Lintは成功、Vercel 500のまま
- そもそもJestやLintのエラーは今回のサーバーエラーと直接関係していないのでは？
- GAの環境変数をNetlifyにのみ追加していたことを思い出し、Vercelにも登録(DWB)
- Vercelのlogページからエラーメッセージを見れることに気づく
- clientModulesの意味がわからないから作戦変更
- そもそもいつからサーバーはエラーになっていたのか？
- Next.js13.5のアップデート時まで遡る：10月18日
- Next.js13.4と13.5の違いを比べてみた時、インストールcommitのpackage.jsonに以上のマークがない
- ^をつけてpushしてみる
  - 変化なし
- eslint-config-nextのバージョンを13.5のときに変えてるのも気になる
- 戻してpushしてみる
  - 変化なし
- Netlifyに独自ドメインをVercelから移行してからエラーになってる？
長引きそうだし、そもそもこれはNext.js14.1のアップデートとは関係ないから次回に持越すことにする。
Netlifyのみ有効という条件付きでmergeしてしまおう!