<p>本ブログサイト(UnBlog)の目次にバグがあったので、先日修正しました。<br>修正にあたり、今後のためにも情報を残しておきたいと思ったので記事にしました。<br>cheerioを使った目次の作成について以下の記事を主に参考にしました。是非みてみてください。<br><a href="https://kawa.dev/blogs/pnjad7zql" target="_blank" rel="noopener noreferrer">https://kawa.dev/blogs/pnjad7zql</a><br><a href="https://blog.microcms.io/create-table-of-contents/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/create-table-of-contents/</a></p><h2 id="h7c33d1d85b">cheerio（チェリオ）とは？</h2><p>cheerioは、サーバー専用に設計されたjQeryがコアとなっているライブラリのことです。<br>cheerioのドキュメントらしきものが存在していたのでこちらを参考に説明していきます。<br><a href="https://cheerio.js.org/" target="_blank" rel="noopener noreferrer">https://cheerio.js.org/</a></p><blockquote><span style="color:inherit">Cheerio is not a web browser</span><br>Cheerio parses markup and provides an API for traversing/manipulating the resulting data structure. It does not interpret the result as a web browser does. Specifically, it does&nbsp;<em>not</em>&nbsp;produce a visual rendering, apply CSS, load external resources, or execute JavaScript. This makes Cheerio&nbsp;<strong>much, much faster than other solutions</strong>. If your use case requires any of this functionality, you should consider projects like&nbsp;Puppeteer&nbsp;or&nbsp;JSDom.</blockquote><p>（和訳）</p><blockquote>CheerioはWebブラウザではありません<br>Cheerioは、マークアップを解析し、結果として得られるデータ構造を閲覧／操作するためのAPIを提供します。Webブラウザのように結果を解釈することはありません。具体的には、視覚的なレンダリングを行ったり、CSSを適用したり、外部リソースを読み込んだり、JavaScriptを実行したりすることはありません。このため、Cherioは他のソリューションよりもはるかに高速です。もしあなたのユースケースがこのような機能を必要とするなら、PuppeteerやJSDomのようなプロジェクトを検討すべきだ。</blockquote><p>こちらの説明からもわかるように、cheerioはマークアップの解析を行なって得られるデータを閲覧・操作することが可能です。<br><br>目次生成やシンタックスハイライト（&lt;pre&gt;要素の中に書いたテキストを装飾すること）のような処理はクライアントサイドで行うのではなく、サーバーサイドで行っておくことによって応答速度が向上します。<br>cheerioのようにサーバーサイドでDOM操作ができるライブラリは、目次生成に重宝します。</p><h2 id="hb1e63e8d52">cheerioの基本的な使い方</h2><p>cheerioは、jQueryがコアとなるライブラリであるため、「$」記号をたくさん使います。<br><code>const $ = cheerio.load(body:string)</code>によって、<code>string</code>型の<code>body</code>をいい感じにHTML Elementにパースしてくれます。<br>そして、<code>$("h2,h3")</code>のように書くことで先程の<code>body</code>からパースされたHTML Elementから指定されたDOM要素を抽出してくれます。<br>以下にcheerioの基本的なコードを示します。</p><pre><code>//ライブラリのインポート
import cheerio from 'cheerio'

//文字列型のマークアップデータをHTML Elementに変換する（パース）
const $ = cheerio.load('&lt;h1&gt;Hoge&lt;/h1&gt;');

//HTML Elementの操作
$("h1").text("Fuga"); //テキストノードの操作
$("h1").addClass("test"); //要素ノードに対して属性を追加

//HTML要素を文字列型に変換する
const result = $.html();
const result2 = $("body").html();

//コンソールに出力
console.log(result);
console.log(result2);

//コンソールの出力結果
//&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;h1 class="test"&gt;Fuga&lt;/h1&gt;&lt;/body&gt;&lt;/html&gt;
//&lt;h1 class="test"&gt;Fuga&lt;/h1&gt;</code></pre><p>雰囲気で良いですが使い方を理解いただけたでしょうか？<br><code>$.html();</code>とすると、<code>&lt;html&gt;</code>要素まで遡って生成されてしまうため、<code>$("body").html();</code>とすることでそれを防いでいます。<br>また、cheerioのドキュメントによると<code>cheerio.load</code>の第3引数に<code>false</code>を指定することによって<code>&lt;html&gt;</code>要素まで遡って生成されてしまうのを防ぐことができると説明されています。</p><pre><code>const $ = cheerio.load('&lt;ul id="fruits"&gt;...&lt;/ul&gt;', null, false);
$.html();</code></pre><p><br>以下のサイトの「使い方」というセクションにおいて、他にも様々な操作方法を紹介されているので参考にしてみてください。<br><a href="https://morizyun.github.io/javascript/node-js-npm-library-cheerio.html" target="_blank" rel="noopener noreferrer">https://morizyun.github.io/javascript/node-js-npm-library-cheerio.html</a></p><h2 id="h99e37730c0">目次作成のロジック</h2><p>基本的な使い方を説明したところで、次に実際に目次ってどうやって作るんやろうってことを説明していきたいと思います。<br><br>UnBlogの場合、[id].tsxの<code>getStaticProps</code>の中でブログ詳細ページの情報をmicro-cmsのAPIからフェッチしてきます。<br>（Next.jsでは、データのフェッチのような時間のかかる処理は、バックエンド環境の<code>getStatcProps</code>内で行います）<br>この場所でブログ詳細ページを構成するマークアップデータを加工すれば目次が作成できます。<br>UnBlogの実装では、<code>h2</code>,<code>h3</code>をブログ詳細ページの小見出しとして使います。<br>そのため、これらの要素をmicro-cmsから取得したマークアップデータから抽出して<code>&lt;li&gt;</code>要素にまとめて、目次コンポーネントのpropsとして渡すことで目次を作成しています。<br></p><h3 id="h32923333e5">目次作成１</h3><p>以下のサイトを参考にして、実際に書いてみましょう。<br><a href="https://kawa.dev/blogs/pnjad7zql" target="_blank" rel="noopener noreferrer">https://kawa.dev/blogs/pnjad7zql</a></p><pre><code>//目次作成関数
const generateTableOfContent = (body: HTMLElement) =&gt; {
  const $ = cheerio.load(`${body}`,{decodeEntities: false})
  let tableOfContent = ''
  tableOfContent = tableOfContent + '&lt;ul&gt;'

  //bodyからh2,h3の要素を抽出
  $("h2, h3").each((index,elem) =&gt; {
//
    const text = $(elem).html()
    const tag = $(elem)[0].name
    const refId = $(elem)[0].attribs.id
    
    tableOfContent = tableOfContent + 
    `&lt;li class="toc_${tag}" key=${refId}&gt;` +
      `&lt;a href="#${refId}"&gt;&lt;span&gt;#&lt;/span&gt;${text}&lt;/a&gt;`+
    '&lt;/li&gt;'
  })

  tableOfContent = tableOfContent + '&lt;/ul&gt;'
  return tableOfContent
}</code></pre><p>[id].tsxの<code>getStaticProps</code>の中</p><pre><code>//getStaticPathsの中のパスの中でユーザーが選んだページコンポーネントのidが渡ってくる
export const getStaticProps: GetStaticProps = async (ctx) =&gt; {
//バックエンド環境
	  const id = ctx.params.id as string

	  //ブログデータを取得（上記のパスを取得）
	  const blog: Blog = await client.get({ endpoint: "blog", contentId: id })
	  //バックグランドでの目次生成（ここで上で定義した関数を実行する）
	  const toc = generateTableOfContent(blog.body)

	 //ページコンポーネントに渡す（今回の場合、ブログ詳細ページコンポーネント）
	  return {
	    props: {
	      blog,
	      toc,
	    },
	  }
	}</code></pre><p>[id].tsxのページコンポーネントに渡す</p><pre><code>const BlogPage: React.FC&lt;BlogProps&gt; = ({ blog, toc }) =&gt; {
  return (
    &lt;&gt;
     {/*divに対してDOM要素を挿入する*/}
      &lt;div
          id="blog_toc"
          dangerouslySetInnerHTML={{
            __html: toc,
          }}
      /&gt;
    ...............
    &lt;/&gt;
  )
}
export default BlogPage</code></pre><p>以上で目次ができたと思います。<br></p><h3 id="h76a89a9856">目次作成２</h3><p>先程の方法とは少し違う方法で、目次を作成してみたいと思います。<br>以下のサイトを参考にしました。<br><a href="https://blog.microcms.io/create-table-of-contents/" target="_blank" rel="noopener noreferrer">https://blog.microcms.io/create-table-of-contents/</a></p><pre><code>//[id].tsxの中のgetStaticPropsによるフェッチ
export const getStaticProps: GetStaticProps = async (ctx) =&gt; {
//バックエンド環境
  const id = ctx.params.id as string
  //ブログデータを取得（上記のパスを取得）
  const blog: Blog = await client.get({ endpoint: "blog", contentId: id })

  //バックグランドでの目次生成
  const $ = cheerio.load(`${blog.body}`);
  //抽出した要素を配列に直す
  const headings = $('h2, h3').toArray();
 //抽出した要素から必要なデータを取り出す
  const toc = headings.map(data =&gt; ({
    text: $(data).text(),//テキストコンテントの中身
    id: data.attribs.id,//a要素のhref属性に渡せば、参照を持てる
    name: data.name
  }));

  return {
    props: {
      blog,
      toc,
    },
  }
}</code></pre><p>id.tsxのページコンポーネントの実装</p><pre><code>const BlogPage: React.FC&lt;BlogProps&gt; = ({ blog, toc }) =&gt; {
  return (
    &lt;&gt;
      &lt;div&gt;
                  {toc.length ? (
                    &lt;ul&gt;
                      {toc.map((t)=&gt;(
                        &lt;li className={t.name} id={t.id}&gt;
                          {t.text}
                        &lt;/li&gt;
                      ))}
                    &lt;/ul&gt;
                  ) : (
                    ""
                  )}
       &lt;/div&gt;
       .............
    &lt;/&gt;
  )
}

export default BlogPage</code></pre><p>こちらの方法でも目次らしきものが作成できました。</p><h2 id="ha214098e44">まとめ</h2><p>cheerioを使って、Next.jsの中で目次を作成することができました。<br>以下の記事によると、jsdomというライブラリを使って目次の生成をすることも可能なようです。<br><a href="https://zenn.dev/d_suke/articles/5bd7b2da4de87c22368e" target="_blank" rel="noopener noreferrer">https://zenn.dev/d_suke/articles/5bd7b2da4de87c22368e</a><br>ここまで読んでくださった方、お疲れ様でした。</p>

【Next.js】cheerioを使って目次を作成

<p><a href="https://www.youtube.com/watch?v=F77RUjHZEAc&amp;list=PLX8Rsrpnn3IUGEyanrHYGjY1WOzNe7Jd-" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=F77RUjHZEAc&amp;list=PLX8Rsrpnn3IUGEyanrHYGjY1WOzNe7Jd-</a><br><a href="https://qiita.com/thesugar/items/01896c1faa8241e6b1bc" target="_blank" rel="noopener noreferrer">https://qiita.com/thesugar/items/01896c1faa8241e6b1bc</a><br><br>Next.jsのチュートリアルをやりながら、Next.jsがどんなものなのかを理解していけたらと思います。<br></p><h2 id="h8cc024a184">Next.jsって何？</h2><ol><li>SEOに強いSPA（シングルーページアプリケーション）開発</li><li>パフォーマンスを効率化する仕組み</li><li>ルーティングが楽</li><li>APIの作成が簡単</li><li>TypeScriptを簡単に導入できる。</li></ol><p>以上のような特徴を持ったReactのフレームワーク。<br><br>今回は主にNext.jsのパフォーマンスを効率化する仕組みについて理解していけたらと思います。<br><br>とりあえずnpxでNext.jsのプロジェクトを作成します。</p><pre><code>npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/navigate-between-pages-starter"</code></pre><p><br></p><h2 id="hc5f18b8d9b">高速ページ遷移を体験する</h2><blockquote>Next.jsでは、pagesディレクトリ内のファイルからエクスポートされたReact Componentがページとなります。<br>ページは、そのファイル名に基づいてルートに関連付けられます。例えば、開発では、pages/index.jsは、' / 'ルートに関連付けられます。pages/posts/first-post.jsは、' /posts/first-post 'ルートに関連付けられています。</blockquote><p><br>つまりNext.jsでは、pagesというディレクトリの構造がそのままそのページにアクセスする為のurlになるっぽいです。<br>スゲェでやんすね。<br></p><h3 id="h339cb1bc95">ページを作る</h3><p>pages/postsに、first-post.jsというファイル( ページ )を作成したので、ここに遷移するためのロジックを作っていきたいと思います。</p><pre><code>export default function FirstPost() {
  return &lt;h1&gt;First Post&lt;/h1&gt;;
}</code></pre><p><br></p><h3 id="h0ffa8efb96">LinkComponent</h3><blockquote>通常Webサイトのページ間をリンクするときには、&lt;a&gt;というHTMLタグを使いますが、Next.jsでは、next/linkのLink Componentを使って、&lt;a&gt;タグをラップします。&lt;Link&gt;を使うと、クライアントサイドでアプリケーション内の別のページへのナビゲーションを行うことができます。</blockquote><p><br>Linkコンポーネントは、以下のようにaタグをラッピングして使用します。<br>pages/index.js</p><pre><code>&lt;Link href="/posts/first-post"&gt;&lt;a&gt;this page!&lt;/a&gt;&lt;/Link&gt;</code></pre><p><br>pages/posts/first-post.jsにもホームに戻って来られるボタンを作成します。</p><pre><code>import Link from "next/link";


export default function FirstPost() {
  return (
    &lt;&gt;
      &lt;h1&gt;First Post&lt;/h1&gt;
      &lt;h2&gt;
        &lt;Link href="/"&gt;
          &lt;a&gt;Back to home&lt;/a&gt;
        &lt;/Link&gt;
      &lt;/h2&gt;
    &lt;/&gt;
  );
}</code></pre><p><br>爆速で遷移します。<br></p><h3 id="h3ba1f2e6d0">Client-Side Navigation</h3><blockquote>クライアントサイド・ナビゲーションとは、JavaScriptを使ってページの遷移を行うことで、ブラウザが行うデフォルトのナビゲーションよりも高速に行うことができます。<br>Linkコンポーネントは、同じNext.jsアプリ内の2つのページ間のクライアントサイドナビゲーションを可能にします。</blockquote><p><br>つまり、ユーザーのリクエスト(トップーページ見せて！とか、ニュース一覧見せて！とか )ごとに、それに対応したHTMLをファイルを返すのではなく、<br>javascriptによってHTMLを書き換えることでページ遷移しているように見せているようです。(クライアントサイドナビゲーション)<br></p><h3 id="h043125c6ee">Code splitting</h3><blockquote>Next.jsは自動的にコード分割を行い、各ページはそのページに必要なものだけを読み込むようになっています。つまり、ホームページがレンダリングされるときに、他のページのコードが最初に提供されることはないのです。<br>これにより、何百ページものページがある場合でも、ホームページの読み込みが速くなります</blockquote><p><br>これは気になっていましたが、画面描画に必要なコードだけを取り込んでくれるんですね。<br></p><h3 id="h1a107f35ad">prefetching</h3><blockquote>さらに、本番環境のNext.jsでは、ブラウザのビューポートにリンクコンポーネントが表示されると、Next.jsはバックグラウンドでリンク先のページのコードを自動的にプリフェッチします。ユーザーがリンクをクリックしたときには、リンク先のページのコードはすでにバックグラウンドで読み込まれており、ページの遷移はほぼ瞬時に行われます。</blockquote><p><br>Linkコンポーネント内の要素から必要になるページのコードを予測して、それをあらかじめ裏側で読み込んでおくから、ボタンを押したら瞬時ページ遷移が行われるようです。夢のような機能ですね。<br>Linkコンポーネントを使わないと該当のページをprefetchingしてくれないようなのでボタンはLinkコンポーネントで作っておくのが吉ですね。<br></p><h2 id="h2d786ead8c">画像、メタデータ、そしてCSS</h2><h3 id="h696ab9fc4a">画像などの静的ファイルを使おう</h3><p>Next.jsで画像ファイルを追加する際は、publicディレクトリ直下に画像ファイルを配置します。<br><br>パスはpublicをルートとしたルートパスで記述します。<br>例えば、publicディレクトリ直下にimgのディレクトリを作成して、その中にLogo.svg(画像ファイル)を配置したならば、以下のような書き方になります。</p><pre><code>&lt;img src="/img/logo.svg"/&gt;</code></pre><p><br></p><h3 id="h01b2740c40">headタグのメタデータを編集しよう</h3><p>Next.jsではHeadタグが用意されており、これをnext/headからインポートすることでメタデータを編集することができるようになります。<br>ページごとにメタデータを設定するとSEO的にいい感じらしいです。</p><pre><code>import Head from 'next/head'</code></pre><p><br>よく使う項目としては以下のような感じです。</p><pre><code>&lt;Head&gt;
  #サイト/ページタイトル
  &lt;title&gt;Create Next App&lt;/title&gt;
  #CSSやCDNの読み込み
  &lt;link rel="icon" href="/favicon.ico" /&gt;
  &lt;meta description="サイトページの説明(120時程度がOK)"/&gt;
  &lt;meta property="SNSシェア時にサイト/ページ情報を表示するOGPタグ"/&gt;
&lt;/Head&gt;</code></pre><p><br></p><h3 id="hc1a6fd04c5">Next.jsのCSS</h3><p><br>tailwindでしょ。<br></p><h2 id="hfe32080cae">Pre-rendering と Data Fetching</h2><h3 id="hef645d25d9">Pre-renderingとは</h3><blockquote>Pre-renderingとは、事前にHTMLを生成することです。Next.jsはデフォルトで全ページをPre-renderしています。</blockquote><p><br>通常のReactアプリケーション(create-react-appで作ったようなアプリケーション)はクライアントサイドレンダリングという方式になっています。<br>これは、ユーザーがwebページにアクセスして、今まさにwebページを表示しようとしているときに、ブラウザ側でHTMLを組み立てるという方式です。<br><br>対してPre-renderingは、ユーザーがwebページにアクセスする以前にHTMLを組み立ておく方式のことです。<br>なので結果的にブラウザの負荷を下げることに繋がり、表示を高速化することができるます。<br><br>この方式だと検索エンジンのクローラーにコンテンツを見せられるので、SEO的にも良いとされています。</p><blockquote><strong style="color:#202124;background-color:#ffffff">クローラー</strong><span style="color:#202124">とは、</span><strong style="color:#202124;background-color:#ffffff">検索エンジン</strong><span style="color:#202124">が</span><strong style="color:#202124;background-color:#ffffff">検索</strong><span style="color:#202124">の順位を決めるための要素を、サイトから収集してくるロボットのこと</span></blockquote><p>クローラーはそのサイトが現在データーの読み込みをしているしていないにかかわらず、画面のキャプチャみたいなの撮って判断するので、読み込みが遅いサイトだとコンテンツが何もないと判断されてSEO的に良くなかったりするみたいです。<br></p><h3 id="h02289335cd">2種類のPre-rendering</h3><p>Next.jsniには、Static Generation と Server-side Renderingという2種類のPre-renderingが用意されています。<br>両者の違いは、HTMLファイルを生成するタイミングです。<br>・Static Generationは、ビルドした段階でHTMLを生成<br>・Server-side Renderingは、ユーザーがサイトにアクセスした時々で毎回HTMLを生成<br><br>Next.jsでは、この両者の方式をページごとに選択することができます。<br></p><h3 id="h39ff3fee4c">Static Generationを使用する時</h3><p>基本的には、Static Generationを使用することが推奨されています。<br>なぜならこの方式が最も表示速度が速くSEO的にも良いからです。<br>最適なページは、更新頻度が低いページです。具体的には以下のようなページです。<br>・ブログ<br>・ECサイト<br>・LP<br>・お問い合わせ<br></p><h3 id="hd63e8ee378">Server-side Renderingを使用する時</h3><p>更新頻度が高いページを作成するときは、Server-Side Renderingが最適です。<br>なぜなら、ユーザーがアクセスする度に毎回最新のHTMLファイルが生成されるからです。<br>表示速度はStatic Generationの方が早いですが、ユーザーが常に最新の情報が見れるのはServer-side Renderingです。<br>具体的には以下のようなページです。<br>・SNS<br>・チャット<br>・動画配信<br><br>おまけ的にですが、クライアントサイドレンダリング（JavaScriptによってクライアントサイドでHTMLを書き換えていく方式）だと、SEO的にあまり良くないみたいです。なぜならこの方式は、Static GenerationやServer-Side RenderingのようにサーバーサイドでHTMLを構成するのではなく、クライアントサイドでHTMLを構成していくからです。クローラーにコンテンツを見せることができないので、コンテンツの少ないページであると判断されてしまいます。<br><br>create-react-appで作ったサイトは最初だけHTMLファイルが返されますが、それ以降はJavaScriptによるクライアントサイトレンダリングを行うので、差分描画によって高速には動作しますが、コンテンツが少ないとみなされ、SEO的にはあまりよろしくないということです。<br></p><h2 id="h982cdc0662">データ有り/無しStatic Generation</h2><p>Static Generationは以下静的ジェネレーションと略します。<br><br>静的ジェネレーションは、外部データが有るか無いかによって挙動が変わってきます。<br></p><h3 id="hf1d88d4778">外部データがないとき</h3><p>ビルド時にレンダリングを行います。<br></p><h3 id="h4dbead8bc4">外部データがあるとき</h3><p>ビルド時にDBや外部APIからデータを取得してきて、その取得してきたデータを使用して、HTMLをレンダリングします。<br>このときに「getStaticProps()」を使用します。<br></p><h3 id="h08837feb23">getStaticPropsでデータを取得する</h3><p>getStaticPropsの特徴</p><ul><li>外部データを取得するために使用する。</li><li>async/awaitを使って非同期処理を制御できる。</li><li>本番環境ではビルド時に実行される関数</li><li>開発環境ではリクエスト毎に実行される</li><li>pageコンポーネントでのみ使用可能(pageディレクトリ配下に作成したコンポーネントでのみ使用できる。)</li></ul><p>本番環境でビルド時ではなくリクエストごとにデータを持ってきたい場合は、getServerSidePropsを使用する。<br></p><h3 id="h6ed1a6f3c0">getServerSidePropsでデータを取得する</h3><p>getServerSidePropsの特徴</p><ul><li>リクエスト毎に実行される関数</li><li>Server-Side Renderringのために使う</li><li>外部データを取得するために使う</li><li>async/awaitを使って非同期処理を制御できる</li><li>pageコンポーネントでのみ使用可能</li></ul><p>内容が頻繁に変更されるデータはリクエストごとにデータが更新された方が良いので、そのようなときは、getStaticPropsではなく、getServersSidePropsを使用する。	<br></p><h2 id="ha214098e44">まとめ</h2><p>今回は主にNext.jsのパフォーマンスを効率化する仕組みについて学習していきました。<br>理解を深めるために簡単にまとめていきたいと思います。<br></p><ul><li>Next.jsでページ遷移を実現する際は、&lt;a&gt;タグではなく、&lt;Link&gt;で&lt;a&gt;タグをラッピングして使用する。このLinkコンポーネントを使用することで、JavaScriptによってページ遷移を行うCliend-Side Navigationを実現することができる。</li><li>Next.jsでは、自動的にコード分割を行い、各ページはそのページに必要なものだけを読み込むようになっている(Code splitting)ので、何百というページがあったとしても、ホームページの読み込みの速度が遅くならない。</li><li>本番環境でのNext.jsでは、ブラウザのビューポートにリンクコンポーネントが表示されると、バックグラウンドでリンク先のコンポーネントを自動的に読み込みます。(Prefetching)なので、ユーザーがリンクをクリックしたらページの遷移が瞬時に行われます。</li><li>Next.jsではHeadコンポーネントをimportすることでページごとにメタデータを編集することができます。</li><li>Next.jsではユーザーがwebページにアクセスする前にHTMLを構成(Pre-rendering)しています。ブラウザの負荷が下がり、表示が高速化します。</li><li>Pre-renderingには2種類あります。Static Generation と Server-side Renderingです。</li><li>Static Generationはビルドした段階でHTMLを生成します。更新が多いページには向きませんが、表示速度はこれが最速です。</li><li>Server-side Renderingはユーザーのリクエストごとに毎回HTMLを生成します。Static Generationよりは表示速度が遅いですが、更新の多いページには最適です。</li><li>Static Generationは外部データの有無によって挙動が変化します。</li><li>外部データがないときはビルド時にHTMLのレンダリングを行います。</li><li>外部データがあるときは、データを取得してからHTMLをレンダリングします。</li><li>Static Generationで外部データを取得する方法には、getStaticPropsを使用する方法と、getServerSidePropsを使用する方法があります。両者pageディレクトリ配下のコンポーネントでのみ使用可能です。async/awaitで非同期処理を制御します。</li><li>getStaticPropsは本番環境ではビルド時に実行されます。(開発環境ではリクエスト毎に実行)Static Generationを行いたい場合に使用します。</li><li>getServerSidePropsはリクエスト毎に実行されます。Server-Side Renderingを行いたい場合(内容が頻繁に更新されるデータを扱う場合)はこちらを使用します。</li></ul><p><br>以上がNext.jsのパフォーマンスを効率化する仕組みです。<br>まぁなんとなくいい感じにわかったと思います。<br>最後までご覧いただきありがとうございました！</p>

Next.jsチュートリアルをやってみる。

<h2 id="hba5e895593">ご挨拶</h2><p>どうもこんにちは、みのちゃんまんです！<br><br>今回は僕の記念すべき初めての技術記事です！<br>気合の入っためちゃくちゃ薄いカルピス記事でいこうと思います！！対戦お願いします。</p><h2 id="h8d027c8ed3">はじめに</h2><p><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0f5284f42f2940d0a6e8b9ed02da3963/%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%88%202021-07-03%2020.26.38.png" alt=""><br>Next.jsのチュートリアルを進めていき、<code>npm run dev</code>を実行したところ、上図のように<code>control+c</code>を押してないのに、勝手に終了してしまうエラーが起きました。<br>いつものように<code>http://localhost:3000</code>の部分を押すと下図のようになり、チュートリアルが進まなくなりました。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/a320e3e50329409ebc41f8060a5ee3bc/%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%88%202021-07-03%2020.34.12.png" alt=""><br><br>今回はこのエラーを解消していきたいと思います！</p><h2 id="h8a175a9b0e">前提</h2><p>今回はVolta環境を使用しています。<br>Volta環境でなくても大丈夫ですが解決方法のコマンドが多少変わりますので、まだの人は <a href="https://www.unblog.unreact.jp/blog/7srpxnqj6" target="_blank" rel="noopener noreferrer">VoltaでNode.js・npmの環境構築をする</a> からVolta環境の準備をおすすめします。</p><h2 id="hcb9dacb773">結論</h2><p><span style="color:#cf3e51">nodeのバージョン</span>を最新のversion 16系から推奨の<span style="color:#cf3e51">version 14系</span>に変更する。<br><br>以上です。<br>nodeのバージョンの確認方法は、ターミナルで<code>node -v</code>でnodeのバージョンが確認できます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/cf5b4371459e47ff958a5ab0065b5244/%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%88%202021-07-03%2021.10.49.png?w=18&amp;h=3" alt=""><br>それでは、解決方法の実際の流れを説明します。</p><h2 id="had0b1b94af">解決方法</h2><p>ターミナルで<code>volta pin node@14</code><span style="background-color:#dddddd"> </span>と入力してください。<br><code>node -v</code> でv.14.17.2のようになったら成功です。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b6cf7f4c76ff4845893e3933388f5459/%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%88%202021-07-03%2021.10.23.png" alt=""><br><code>npm run dev</code> を試してみてください。うまくいくと思います。</p><h2 id="h9be0c3393d">おわりに</h2><p>以上で終了です。<br>対戦ありがとうございました。<br><br><br><br><br></p>

【Next.js】cheerioを使って目次を作成

Next.jsチュートリアルをやってみる。

Next.jsでnpm run devしたときにlocalhost3000にアクセスできない

Tags

About this Blog