HarioNote

<p>タイトルの通り、<a href="https://nextjs.org/docs">Next.jsの公式Doc</a>を読みながらデプロイ方法、デプロイ先について公式Docではどのようなものが提案・紹介されているのか確認しながら考えてみようと思います。</p>
<p>本記事の内容は公式Docの内容に則っていますが私の意訳なので正しいことを保証するものではありません。正確な情報を知りたい場合は<a href="https://nextjs.org/docs">公式Doc</a>を参照してください。</p>
<h2>公式Docを読む際の注意点</h2>
<p>まずNext.jsの公式Docを読む際の注意点ですが、Next.jsはPages RouterとApp Routerがあり、DocもPages RouterとApp Routerで分かれているので注意してくだい。<br>
なお本記事はApp Routerを前提としています。</p>
<p><img src="https://storage.googleapis.com/newt-files/e1bde5b2-7579-43ff-bed9-fcea7deccb15/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-045.39.34.png" alt="スクリーンショット2023-07-045.39.34.png"><br>
PagesRouterに関するドキュメントかAppRouterに関するドキュメントかは左サイドのナビの一番上に表示されている。</p>
<p><img src="https://storage.googleapis.com/newt-files/b369f933-f244-4578-ba15-e56cee615b4c/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-045.41.35.png" alt="スクリーンショット2023-07-045.41.35.png"><br>
表示するドキュメントはここで切り替えることができます。</p>
<p><img src="https://storage.googleapis.com/newt-files/6c478c55-d184-42c2-a6f0-1cd8cf43b2eb/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%882023-07-045.42.13.png" alt="スクリーンショット2023-07-045.42.13.png"><br>
ちなみにドキュメントを検索する場合もApp(AppRouter)かPages(PagesRouter)かターゲットを選択できます。</p>
<h2>公式Docのデプロイに関する章を確認してみる</h2>
<p>デプロイに関する内容は<a href="https://nextjs.org/docs/app/building-your-application/deploying">こちら</a>に記載されています。</p>
<h3>ビルドで生成されるもの</h3>
<p>デプロイ先を考えるうえでまず、ビルドによって生成されるものを確認しましょう。<br>
Next.jsでビルドすると</p>
<ul>
<li><a href="https://nextjs.org/docs/pages/building-your-application/rendering/automatic-static-optimization">Automatic Static Optimization</a>されたページか(Pages Routerで)getStaticPropsを使ったページのHTMLファイル</li>
<li>CSSファイル</li>
<li>Next.jsサーバーで動的なコンテンツをプリレンダリングするためのJavaScript</li>
<li>クライアントサイドでインタラクティブなUIなどを提供するためのJavaScript</li>
</ul>
<p>といったものが生成されるようです。（生成物は.nextフォルダに出力されるとのこと。）</p>
<p>※ Next.jsには静的エクスポート機能(Static Exports)もあるため、それを利用する場合はまた違ってくるようです。<br>
※ ビルドコマンドに関するDocは<a href="https://nextjs.org/docs/app/api-reference/next-cli#build">こちら</a>です。</p>
<h3>Vercelかセルフホスト</h3>
<p>ホスティング先を考える場合、まず最初の分かれ道としてVercelを使うかそれ以外にするか、だと思います。<br>
VercelはNext.jsの開発元なだけあり、設定作業等は最小限でいいみたいです。ただVercelは開発元提供のスタンダードな方法なので本記事ではとくに掘り下げて触れることはしません。</p>
<h3>セルフホストをする場合</h3>
<h4>Node.js</h4>
<p>セルフホストするホスティング先(デプロイ先)の環境としては、Node.jsをサポートしているホスティングプロバイダーであればどれでもデプロイ可能なようです。（例えば、awsのEC2やDigitalOcean Dropletなど。）</p>
<h4>Docker Image</h4>
<p>また、Dockerコンテナをサポートしているホスティングプロバイダでもデプロイ可能とのことです。コンテナでNode.js環境を用意してあげるので、ホスティングプロバイダ自体がNode.jsをサポートする必要はないということですね。（手順の例も<a href="https://nextjs.org/docs/app/building-your-application/deploying#docker-image">こちら</a>に載っています。）</p>
<h4>StaticなHTMLのエクスポート</h4>
<p>Next.jsの静的エクスポート機能(Static Exports)を使用する場合は、Node.js環境やDockerコンテナサポートがないホスティング先にもデプロイできるようです。<br>
ただ、Static Exportsには使用できる条件などがあるので注意が必要です。（Static ExportsについてのDocは<a href="https://nextjs.org/docs/app/building-your-application/deploying/static-exports">こちら</a>）</p>
<h3>その他のサービスを利用したホスティング</h3>
<p>Vercelやセルフホスト以外にマネージドなサーバーを提供しているサービスを利用する方法もある。今時はこれも多いのではないだろうか。<br>
以下のサービスがNext.jsのデプロイ方法を紹介していたりする。</p>
<ul>
<li><a href="https://aws.github.io/copilot-cli/">AWS Copilot</a></li>
<li><a href="https://docs.digitalocean.com/tutorials/app-nextjs-deploy/">Digital Ocean App Platform</a></li>
<li><a href="https://github.com/vercel/next.js/tree/canary/examples/with-docker">Google Cloud Run</a></li>
<li><a href="https://elements.heroku.com/buildpacks/mars/heroku-nextjs">Heroku</a></li>
<li><a href="https://docs.railway.app/getting-started">Railway</a></li>
<li><a href="https://render.com/docs/deploy-nextjs-app">Render</a></li>
</ul>
<h4>静的エクスポート(Static Exports)で、その他サービスを利用してホスティング</h4>
<p>Static Exportsを利用するNext.jsアプリであっても、その他サービスを利用する方法という選択肢がある。<br>
Static Exportsであれば静的ホスティングプロバイダを利用してホスティングができる。</p>
<p>GitHub Actions、Jenkins、AWS CodeBuild、Circle CI、Azure PipelinesなどのCI/CDパイプラインを通してデプロイすることも可能とのこと。</p>
<p>以下のホスティングプロバイダのサービスがNext.jsの静的ホスティングの方法を紹介したりしている。</p>
<ul>
<li><a href="https://aws.amazon.com/blogs/mobile/amplify-next-js-13/">AWS Amplify</a></li>
<li><a href="https://learn.microsoft.com/en-us/azure/static-web-apps/nextjs">Azure Static Web Apps</a></li>
<li><a href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/">Cloudflare Pages</a></li>
<li><a href="https://firebase.google.com/docs/hosting/nextjs">Firebase</a></li>
<li><a href="https://docs.netlify.com/integrations/frameworks/next-js">Netlify</a></li>
<li><a href="https://github.com/milliHQ/terraform-aws-next-js">Terraform</a></li>
<li><a href="https://docs.sst.dev/start/nextjs">SST</a></li>
</ul>
<h2>所感</h2>
<p>デプロイ方法ホスティング先としてはかなり多様な選択肢があるようですね。<br>
Static Exportsであれば、ちょっとしたレンタルサーバーへのデプロイも可能で、シンプルなウェブサイト的なものであればそれもありかと思いました。</p>
<p>選択のポイントとしては、Static Exportsをするかどうかに大きく左右されそうですね。（Static ExportsだとNode.js環境が不要というのは大きいですね）</p>
<p>Next.jsで何かを作る際は、最初にStatic Exportsするかどうかを検討するのが良さそうです。</p>
<p>以上。</p>


Next.js(App Router)のデプロイ方法/デプロイ先(ホスディング先)について公式Doc読んで考えてみる🤔

<h2>やりたいこと</h2>
<p>例えばコンポーネントAaa, Bbb, Cccがあったとして</p>
<pre><code>app/
┣ components/
┃  ┣ Aaa.tsx
┃  ┣ Bbb.tsx
┃  ┗ Ccc.ts
┗ page.tsx
</code></pre>
<p>のような構成でpage.tsxからそれぞれをインポートして使うと</p>
<pre><code class="language-tsx">import Aaa from './components/Aaa'
import Bbb from './components/Bbb'
import Ccc from './components/Ccc'
</code></pre>
<p>みたいな感じになると思います。</p>
<p>これを</p>
<pre><code class="language-tsx">import { Aaa, Bbb, Ccc } from './components'
</code></pre>
<p>みたいにインポートできるようするための備忘録です。</p>
<h2>ディレクトリ構成</h2>
<p>最初のやつに<code>index.ts</code>を追加して以下のようにします。</p>
<pre><code>app/
┣ components/
┃  ┣ Aaa.tsx
┃  ┣ Bbb.tsx
┃  ┣ Ccc.tsx
┃  ┗ index.ts
┗ page.tsx
</code></pre>
<h2>各コンポーネントのexport</h2>
<p>コンポーネントのexportのやり方はとくに特別なことは不要で、普通に<code>export</code>するか<code>default export</code>でokです。</p>
<pre><code class="language-tsx">/* 普通にexport */
export const Aaa: React.FC = () =&gt; {
（略）
</code></pre>
<pre><code class="language-tsx">/* default export */
const Bbb: React.FC = () =&gt; {
（略）
export default Bbb;
</code></pre>
<h2>index.tsでexportをまとめる</h2>
<p>先程のexportしたコンポーネントをまとめます。<br>
書き方は<code>export</code>したか<code>default export</code>したかで変わります。<br>
先程のAaaとBbbに加えて、Cccもdefault exportしたとした場合の例とするとindex.tsを以下のようにします。</p>
<pre><code class="language-ts"> /* exportした場合は↓のように書く */
export * from './Aaa'
/* default exportした場合は↓のように書く */
export { default as Bbb } from './Bbb'
export { default as Ccc } from './Ccc'
</code></pre>
<p>これで先程のように<code>pate.tsx</code>にて</p>
<pre><code class="language-tsx">import { Aaa, Bbb, Ccc } from './components'
</code></pre>
<p>といった感じでインポートして使えます。</p>


【React/TypeScript】複数のコンポーネントのexportをindex.tsにまとめてimportをいい感じにする方法の備忘録

<p>自分用の備忘録です～</p>
<p>表題にあるように「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることは...」と言われるときは、以下のようにしてしまっているときではないでしょうか？</p>
<pre><code>type DataType = &quot;animal&quot; | &quot;plant&quot; | &quot;fish&quot;;

const TabLabels: { [key: DataType]: string } = {
  animal: &quot;動物&quot;,
  plant: &quot;植物&quot;,
  fish: &quot;魚&quot;,
};
</code></pre>
<p>以下のように修正すればokです。</p>
<pre><code>type DataType = &quot;animal&quot; | &quot;plant&quot; | &quot;fish&quot;;

const TabLabels: { [key in DataType]: string } = {
  animal: &quot;動物&quot;,
  plant: &quot;植物&quot;,
  fish: &quot;魚&quot;,
};
</code></pre>
<p>以上！</p>


【TypeScript】「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】

<p>親要素の高さはウィンドウいっぱいに、そして複数の子要素のうち1つだけをウィンドウの余った高さ領域いっぱいにします。<br>
そしてその子要素は、孫要素に高さに関わらずウィンドウの高さが縮んだら縮んでスクロールバーが表示されるようにします。</p>
<p>説明が少し分かりづらいので画像を使って説明します。</p>
<p>以下のように各要素をレイアウトして、「data1~」がある領域はウィンドウ(ブラウザ)の高さに合わせて広がるようにしつつ、<br>
<img src="https://storage.googleapis.com/newt-files/453b040f-8482-4ee5-b87d-8cb8d08e62a6%2F2023-03-29_1.png" alt="2023-03-29_1.png"></p>
<p>ウインドウを縦に縮めた場合に↓のようになるのではなく、<br>
<img src="https://storage.googleapis.com/newt-files/e189dbb5-a77a-4493-b0cd-e1cc4a1ef045%2F2023-03-29_3.png" alt="2023-03-29_3.png"></p>
<p>↓の様になるようにします。<br>
<img src="https://storage.googleapis.com/newt-files/3795359b-955a-412e-877f-0fc10416b349%2F2023-03-29_2.png" alt="2023-03-29_2.png"></p>
<h2>ポイント</h2>
<ul>
<li>flexboxを使う</li>
<li>flex: 1を使う</li>
<li>overflow: autoを使う</li>
<li>うまくいかない場合はmin-height: 0を試してみる</li>
</ul>
<h2>実装例</h2>
<p>以下は最初に添付した画像の内容を実装したReactのコードです。<br>
Reactのコードといっても、「Root」や「FlexBox1」等はReactとemotionでstyleをあてているだけで、divにCSSを設定するのと同様です。</p>
<p>下部に記載されている「…= styled.div`…」あたりのコードと同等の記述をCSSで行えば、純粋なHTML+CSSで同じレイアウトを再現できるはずです。</p>
<pre><code>import styled from &quot;@emotion/styled&quot;;
import { FunctionComponent } from &quot;react&quot;;

const LayoutWithFlexboxPage: FunctionComponent = () =&gt; {
  return (
    &lt;Root&gt;
      &lt;FlexBox1&gt;
        Top
      &lt;/FlexBox1&gt;
      &lt;FlexBox2&gt;
        &lt;ul&gt;
          &lt;li&gt;data1&lt;/li&gt;
          &lt;li&gt;data2&lt;/li&gt;
          &lt;li&gt;data3&lt;/li&gt;
          &lt;li&gt;data4&lt;/li&gt;
          &lt;li&gt;data5&lt;/li&gt;
          &lt;li&gt;data6&lt;/li&gt;
          &lt;li&gt;data7&lt;/li&gt;
          &lt;li&gt;data8&lt;/li&gt;
          &lt;li&gt;data9&lt;/li&gt;
          &lt;li&gt;data10&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/FlexBox2&gt;
      &lt;FlexBox1&gt;
        Bottom
      &lt;/FlexBox1&gt;
    &lt;/Root&gt;
  );
};

const Root = styled.div`
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 20px;
  background-color: lightblue;
`;

const FlexBox1 = styled.div`
  background-color: lightcoral;
  display: flex;
`;

const FlexBox2 = styled.div`
  background-color: lightgreen;
  display: flex;
  flex: 1;
  overflow: auto;
`;

export default LayoutWithFlexboxPage;

</code></pre>
<p>以上です。</p>
<h3>補足</h3>
<ul>
<li>MUI等の<code>Box</code>を使用する場合、うまくいかなければ上記の例でいうところの「FlexBox2」に「min-height: 0」を指定してみてください。</li>
<li>親要素(Root)の高さは「100%」でもいいですが、さらに親の要素にも「height: 100%」が設定されていないと期待した振る舞いをしないことがあるため「height: 100dvh」を指定しています。</li>
</ul>


【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】

<p>前回の記事の続きです。</p>
<p>ページ全体のデフォルトのSEO設定はできたので、今度は記事ページ固有のSEO設定ができるようにします。<br>
本記事の環境では<a href="https://www.newt.so/">Newt</a>（ヘッドレスCMS）を利用しているため、Newtのapiから返ってくる値を利用して自動で各記事ページにSEO設定が行われるようにすることを目標とします。</p>
<p>そのため本記事ではNextSeoに設定される値はNewt由来の変数がほとんどになりますが、Newtを使用していない環境の方の場合も、設定する値の取得方法が異なるだけで設定する項目は変わらないと思うので、基本的にやることも変わらないと思います。</p>
<h2>実装</h2>
<h3>記事ページのコンポーネントを編集</h3>
<p>本記事ブログはNewtのNext.jsテンプレートが土台となっているため、もともと最小限のseoに関する記述が記事ページのコンポーネントに書かれていますので、それらを削除しnext-seoでの設定の記述に書き換えます。</p>
<p>↓が元々の状態です。</p>
<pre><code>...
  return (
    &lt;Layout app={app}&gt;
      &lt;Head&gt;
        &lt;title&gt;{title}&lt;/title&gt;
        &lt;meta name=&quot;description&quot; content={description} /&gt;
        &lt;meta property=&quot;og:type&quot; content=&quot;article&quot; /&gt;
        &lt;meta property=&quot;og:title&quot; content={title} /&gt;
        &lt;meta property=&quot;og:description&quot; content={description} /&gt;
        &lt;meta property=&quot;og:image&quot; content={ogImage} /&gt;
        &lt;meta name=&quot;twitter:card&quot; content=&quot;summary_large_image&quot; /&gt;
        &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
      &lt;/Head&gt;
...
</code></pre>
<p>これを以下のように書き換えました。</p>
<pre><code>...
import { NextSeo } from &quot;next-seo&quot;;
...
  return (
    &lt;Layout app={app}&gt;
      &lt;NextSeo
        title={title}
        description={description}
        openGraph={{
          title,
          description,
          type: &quot;article&quot;,
          article: {
            tags: currentArticle.tags.map((tag) =&gt; tag.name),
            authors: [currentArticle.author.fullName],
            publishedTime: currentArticle?._sys?.createdAt,
            modifiedTime: currentArticle?._sys?.updatedAt,
          },
          images: [
            {
              url: currentArticle.coverImage.src,
              width: 700,
              height: 420,
              alt: title,
            }
          ],
        }}
      /&gt;
...
</code></pre>
<p>※<code>&lt;Head&gt;</code>は削除しました。<br>
基本的にNewtのapiから取得している値を流用してセットしているだけです。</p>
<h3>記事ページを確認</h3>
<p>では<code>npm run dev</code>で立ち上げて記事ページにアクセスしてSEO設定を確認してみます。<br>
確認すると以下のようにmetaタグが生成されています。<br>
<img src="https://storage.googleapis.com/newt-files/d8fb89f8-00c2-49c2-8251-3b43d9419a5f%2F212018.png" alt="212018.png"></p>
<p>以上です。</p>


【Next.js/next-seo】Next.jsで作成されたサイトに「next-seo」モジュールでSEO設定をする【React/TypeScript】

【Next.js/next-seo】next-seoで記事ページ毎のSEO設定をする【React/TypeScript】

<p>本ブログをWordPressからNewt + Next.js(v13)にリニューアルしてからSEOの設定を行っていなかったため、npmモジュールの<code>next-seo</code>モジュールを使って設定してみました。</p>
<p>next-seo：<a href="https://www.npmjs.com/package/next-seo">https://www.npmjs.com/package/next-seo</a></p>
<h2>NextSeo</h2>
<p>※以下公式の情報を基に私の意訳になります。<br>
next-seoはSEOを設定したいページに<code>NextSeo</code>タグ埋め込むことで動作し、headタグ内に設定した内容に沿ってmetaタグ等をレンダリングしてくれるそうです。</p>
<p>これだけ読むとすべてのページにNextSeoタグを埋め込む作業が必要なように思えますが、自動ですべてのページにデフォルトのSEO設定を出力してくれるデフォルトSEO設定機能があるようです。<br>
Next.jsの_app.js(カスタム<code>&lt;App&gt;</code>)を利用する方法が提供されています。</p>
<p>これに加えてページ固有のSEO設定を行いたい場合は、そのページにのみ個別で<code>NextSeo</code>タグを設定すれば上書きしてくれるっぽいです。</p>
<p><code>next-seo.config.js</code>のようなファイルを作成しておき、そこにデフォルトのSEO設定を記述しておき読み込ませて使用する方法も紹介されています。</p>
<p>Title Template機能を使用すれば記事タイトルの表示形式の設定もできるようです。</p>
<pre><code>title = 'This is my title';
titleTemplate = 'Next SEO | %s';
// outputs: Next SEO | This is my title
</code></pre>
<h2>実装</h2>
<h3>next-seoモジュールインストール</h3>
<pre><code>&gt; npm install --save next-seo@5.15.0 --save-exact
</code></pre>
<p>※versionは最新のものを確認して各自修正してください。</p>
<h3>デフォルトのSEO設定を記述するファイル作成</h3>
<p><code>next-seo.config.ts</code>という名前で設定ファイルを作成（ファイル名はなんでもokです）<br>
今回は以下のように記述してみました。</p>
<pre><code>import { DefaultSeoProps } from &quot;next-seo&quot;;

const SITE_NAME = &quot;HarioNote&quot;;

const TitleTemplate = `%s | ${SITE_NAME}`;

const config: DefaultSeoProps = {
  title: SITE_NAME,
  titleTemplate: TitleTemplate,
  defaultTitle: SITE_NAME,
  description: &quot;IT関連やDIY,気になったモノとかのまとめなど,なんでもありのハリオのノート&quot;,
  canonical: &quot;https://harionote.net/&quot;,
  openGraph: {
    url: &quot;https://harionote.net/&quot;,
    title: SITE_NAME,
    description: &quot;IT関連やDIY,気になったモノとかのまとめなど,なんでもありのハリオのノート&quot;,
    siteName: SITE_NAME,
  },
  twitter: {
    site: SITE_NAME,
    cardType: &quot;summary_large_image&quot;
  }
}

export default config;
</code></pre>
<h3>_app.tsxにてデフォルトのSEO設定を適用</h3>
<p>next.jsの機能としてある_app.tsx(または_app.js)ファイルを利用して先程作成したデフォルトのSEO設定がすべてのページに適用されるようにします。</p>
<p>※<code>_app.tsx</code>ファイルはない場合は新規作成してください。配置場所は<code>/pages</code></p>
<p>元々↓のような_app.tsxを</p>
<pre><code>import &quot;../styles/globals.css&quot;;

function MyApp({ Component, pageProps }) {
  return (&lt;Component {...pageProps} /&gt;);
};

export default MyApp;
</code></pre>
<p>↓のように編集しました。</p>
<pre><code>import &quot;../styles/globals.css&quot;;
import { DefaultSeo } from &quot;next-seo&quot;;

import SEO from &quot;../nextSeo/next-seo.config&quot;;

function MyApp({ Component, pageProps }) {
  return (
    &lt;&gt;
      &lt;DefaultSeo {...SEO} /&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/&gt;
  );
};

export default MyApp;
</code></pre>
<p>編集後<code>npm run dev</code>コマンドで立ち上げて確認すると</p>
<p><img src="https://storage.googleapis.com/newt-files/ae4b9c96-0273-4971-9101-615f0879efef%2F16541656.png" alt="16541656.png"><br>
となっていたheadタグ内に<br>
<img src="https://storage.googleapis.com/newt-files/a65e6c48-47ab-4048-9803-4e79ce9dee76%2F192404.png" alt="192404.png"><br>
のようにmetaタグが生成されるようになりました～。</p>


<p>表題の通りです。Next.jsのプロジェクトにGoogle Tag Managerを導入する際に、公式のexampleがあるのですがそれを見ながらやっても若干苦戦したのでその備忘録です。</p>
<p>公式example：<a href="https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager/lib">https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager/lib</a></p>
<h2>要点</h2>
<p>今回扱うファイル</p>
<ul>
<li>.env.sample(.env.local)</li>
<li>pages/_document.tsx<br>
本記事内の表記について</li>
<li>GTM：Google Tag Managerのことです</li>
</ul>
<h2>実装</h2>
<h3>envファイルにGTMのIDを追加</h3>
<p>「.envファイル」(.env.sample, .env.local等)にGTMのIDを記述しておきます。</p>
<pre><code>...

GTM_ID=XXX-XXXXXX

...
</code></pre>
<p>＜補足＞<br>
　タグマネージャーのIDは下図の部分に記載されているものです。</p>
<p><img src="https://storage.googleapis.com/newt-files/7291b0eb-f12e-47c9-8c3a-58f858066649%2Fimage-58566.png" alt="image-58566.png"></p>
<h2>_document.tsxにGTM導入のための記述追加</h2>
<p>「/pages/_document.tsx」にGTMを導入するための記述を追加します。</p>
<pre><code>import { Html, Head, Main, NextScript } from &quot;next/document&quot;

/* ↓追記箇所 */
const GTM_ID = process.env.GTM_ID;

export default function Document() {
  return (
    &lt;Html&gt;
      &lt;Head&gt;
/* ↓追記箇所---------------------------------------------- */
          {GTM_ID &amp;&amp; (
            &lt;Script
              id=&quot;gtag-base&quot;
              strategy=&quot;afterInteractive&quot;
              dangerouslySetInnerHTML={{
                __html: `
                      (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                      j=d.createElement(s),dl=l!='dataLayer'?'&amp;l='+l:'';j.async=true;j.src=
                      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                      })(window,document,'script','dataLayer', '${GTM_ID}');
                    `,
              }}
            /&gt;
          )}
/* ↑追記箇所---------------------------------------------- */
      &lt;/Head&gt;
      &lt;body&gt;
/* ↓追記箇所---------------------------------------------- */
          &lt;noscript&gt;
            &lt;iframe
              title=&quot;Tag Manager&quot;
              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
              height=&quot;0&quot;
              width=&quot;0&quot;
              style={{ display: &quot;none&quot;, visibility: &quot;hidden&quot; }}
            /&gt;
          &lt;/noscript&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
/* ↑追記箇所---------------------------------------------- */
      &lt;/body&gt;
    &lt;/Html&gt;
  )
}
</code></pre>
<p>追加する記述内容は以上です。</p>
<h2>動作確認</h2>
<p>Next.jsを立ち上げて、Chromeなどブラウザの開発ツールで確認してみます。<br>
　「Network」の欄をみるとちゃんと200が返ってきているようです。<br>
<img src="https://storage.googleapis.com/newt-files/ea58df0a-e08f-4093-a3a2-7a335995e8d0%2Fimage-685748.png" alt="image-685748.png"></p>
<p>ちなみにですが、タグマネージャーのプレビュー機能は、localhostで実行している場合でも行えるのでそちらで確認もしてみるといいかもしれません。</p>
<h2>Advanced</h2>
<p>よりよいコードや設計にするためのAdvancedな項目を挙げてみました。</p>
<ul>
<li>「GTM_ID」を「_document.tsx」の外で(別ファイルで)定義
<ul>
<li>環境変数を引っ張ってくる「process.env.XXX」の記述を都度書かせるような設計をしない。（ケアレスミスの温床になりやすい）</li>
<li>使用する環境変数が多い場合、その方がプロジェクト全体がクリーンになる。（と思ってる）</li>
<li>定義ファイルで定義する際についでにZodとかで型安全化するのもあり</li>
</ul>
</li>
<li>「_document.tsx」に記述した、&lt;Script …/&gt;の「dangerouslySetInnerHTML」に渡している内容は別ファイルで定義しておいた方が_document.tsxの全体の見通しがよくなるかも</li>
</ul>
<p>以上です。</p>


【React/TypeScript】Next.jsプロジェクトにGoogle Tag Managerを導入する【GTM】

<h2>症状が発生したきっかけ</h2>
<p>Nodeのバージョンを18に上げたら急に立ち上げられなくなりました。</p>
<p>理由は調べたらいろいろ言及しているものがあったのですがここでは省略します。（「storybook node 18 」などでググるといろいろ出てきます）</p>
<h2>行った解決策</h2>
<p>私の場合、単純にstorybookリポジトリの<a href="https://github.com/storybookjs/storybook/issues/18019">こちら</a>のissueのコメントにあった解決策を試したら解決しました。以下に手順を示します。</p>
<ol>
<li>nodeモジュールの追加<br>
・@storybook/builder-webpack5<br>
・@storybook/manager-webpack5<br>
の2つのモジュールを追加します。</li>
</ol>
<pre><code>npm install @storybook/builder-webpack5@6.5.13 --save-exact
npm install @storybook/manager-webpack5@6.5.13 --save-exact
</code></pre>
<p>※バージョンはその時最新にするなど調整してください。</p>
<ol start="2">
<li>main.jsを修正<br>
　module.exports以下の内容が加わるように変更を加えてください。</li>
</ol>
<pre><code>module.exports = {
  core: {
    builder: &quot;webpack5&quot;,
  },
}
</code></pre>
<p>以上の変更を行って、「npm run storybook」を実行したら無事storybookを立ち上げることができました。</p>
<p>以上です。</p>
<h2>参考</h2>
<ul>
<li><a href="https://github.com/storybookjs/storybook/issues/18019">https://github.com/storybookjs/storybook/issues/18019</a></li>
</ul>


【React/TypeScript】nodeのバージョンを上げて、storybook起動しようとしたら「TypeError: Cannot read properties of undefined (reading ‘createSnapshot’)」とか言われて、立ち上げられなかったのを解決した【Storybook】

#React/TypeScript

Next.js(App Router)のデプロイ方法/デプロイ先(ホスディング先)について公式Doc読んで考えてみる🤔

【React/TypeScript】複数のコンポーネントのexportをindex.tsにまとめてimportをいい感じにする方法の備忘録

【TypeScript】「インデックスシグネチャパラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】

【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】

【Next.js/next-seo】next-seoで記事ページ毎のSEO設定をする【React/TypeScript】

【Next.js/next-seo】Next.jsで作成されたサイトに「next-seo」モジュールでSEO設定をする【React/TypeScript】

【React/TypeScript】Next.jsプロジェクトにGoogle Tag Managerを導入する【GTM】

【React/TypeScript】nodeのバージョンを上げて、storybook起動しようとしたら「TypeError: Cannot read properties of undefined (reading ‘createSnapshot’)」とか言われて、立ち上げられなかったのを解決した【Storybook】

#React/TypeScript

Next.js(App Router)のデプロイ方法/デプロイ先(ホスディング先)について公式Doc読んで考えてみる🤔

【React/TypeScript】複数のコンポーネントのexportをindex.tsにまとめてimportをいい感じにする方法の備忘録

【TypeScript】「インデックス シグネチャ パラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】

【HTML/CSS】ウィンドウ(親)の余った領域の高さいっぱいに子要素を広げつつ、ウィンドウサイズが小さくなったら子要素がまずスクロール可能になるようにする【React】

【Next.js/next-seo】next-seoで記事ページ毎のSEO設定をする【React/TypeScript】

【Next.js/next-seo】Next.jsで作成されたサイトに「next-seo」モジュールでSEO設定をする【React/TypeScript】

【React/TypeScript】Next.jsプロジェクトにGoogle Tag Managerを導入する【GTM】

【React/TypeScript】nodeのバージョンを上げて、storybook起動しようとしたら「TypeError: Cannot read properties of undefined (reading ‘createSnapshot’)」とか言われて、立ち上げられなかったのを解決した【Storybook】

【TypeScript】「インデックスシグネチャパラメーターの型をリテラル型またはジェネリック型にすることはできません。代わりに、マップされたオブジェクト型の使用を検討してください。」と言われるとき【React】