HarioNote

<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を13にアップデートしたことでコードの修正が必要になったのでその備忘録です。<br>
　私の場合は主に「next/image」「next/link」で修正が必要でした。</p>
<h2>next/image</h2>
<p>主に以下の内容がアップデートの目玉らしい</p>
<ul>
<li>レイアウトシフトなしで画像表示</li>
<li>オンデマンドでファイル最適化</li>
<li>クライアント側のJS軽量化</li>
<li>styleの設定がより簡単に</li>
<li>Webプラットフォームとの整合性</li>
<li>ネイティブ遅延ロードによりさらに高速化</li>
</ul>
<h3>13より前のnext/imageを使っていた私の場合</h3>
<p>古いverのNextImageは「next/legacy/image」という名前に変更されたらしい。</p>
<p>新しいnext/imageでは、「layout=”fill”」「objectFit=”contain”」のような指定がいらなくなるようだ。（fillについては、単純に「fill」というプロパティがあるようだ）</p>
<p>すぐに対応できないがNext.jsのバージョンは上げたいという人用なのか、next/legacy/image（古い仕様のままになるよう）に置換するコマンドが用意されているとのこと。<br>
　私の場合は新仕様に修正する方向の対応するため上記のコマンドは使用していません。</p>
<h2>next/link</h2>
<p>中にaタグを仕込む必要がなくなったとのこと。（というより子要素に<code>&lt;a&gt;</code>があれば削除の必要がある）</p>
<p><Link>タグ内にhref等を設定することになります。</p>
<p>よってpassHrefプロパティは不要になるが、旧仕様にも対応できるようにするためか現状は残してある。</p>
<h2>まとめると</h2>
<p>私の場合以下の修正が必要だった。</p>
<ul>
<li>next/image
<ul>
<li>廃止となったプロパティ削除</li>
<li>指定するプロパティ変更</li>
</ul>
</li>
<li>next/link
<ul>
<li>子要素のタグ削除</li>
<li>hrefは<code>&lt;Link&gt;</code>に設定</li>
</ul>
</li>
</ul>
<h2>参考</h2>
<p>https://nextjs.org/blog/next-13#breaking-changes<br>
https://nextjs.org/docs/api-reference/next/link<br>
https://nextjs.org/docs/api-reference/next/image</p>


Next.js 13 にアップデートにしたら修正が必要だった箇所の備忘録

<p>Next.jsプロジェクトの開発中、実機でデバックしていたらなぜかiPhoneでのみクラッシュする現象に遭遇しました。なんどもリロードするような挙動をするため、最初はリダイレクトループかな？と思いましたがPCでアクセスすると発生しないためとても困惑しました。その際の対応の備忘録です。</p>
<h2>原因/結論</h2>
<p>結論からいいますと、クラッシュするページで表示している画像のサイズが大きすぎることが原因と思われます。</p>
<p>いろいろ調べているうちに、私と同様の症状と思われるissueが見つかりましてそれが<a href="https://github.com/vercel/next.js/issues/34455">こちら</a>になります。<br>
　issue内のコメントで「iOSが画像読み込み時のRAM使用量を制限しているため…」とありました。どうやらこれが原因の可能性が高そうです。</p>
<h2>検証と対応</h2>
<p>症状が発生しているページで使用している画像を調べてみると、かなりサイズが大きい画像が混じっていました。</p>
<p>これを試しにサイズダウンしてみると問題の症状が発生しなくなりました。</p>
<p>ここまでたどり着くのに相当時間がかかってしまったのでほっとしました。</p>
<p>何かしらの対策がされるまで今後は注意しようと思います。</p>
<p>以上です。</p>


#Next.js

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

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

Next.js 13 にアップデートにしたら修正が必要だった箇所の備忘録

【React/TypeScript】iPhone(実機)でのみNext.jsがクラッシュする現象に遭遇した【Next.js】