Next.jsのgetStaticPathsについて初心者の方向けにfallbackの解説含めてご紹介します。

<h2 id="hfa0bd2cf6f">getStaticPathsについて</h2><p>動的ルーティングを行うページでgetStaticPropsを使用してSSGやISRといった技術を実現する際に扱う関数のことです。<br><br>getStaticProps, SSGについてはこちらで紹介しています。<br><a style="color:#1784e9" href="https://digisquare.jp/blog/8" target="_blank" rel="noopener noreferrer">[入門]Next.jsのgetStaticPropsについて</a><br></p><h3 id="hca54225ffe">動的ルーティングとは</h3><p>動的ルーティングは別名、ダイナミックルーティングとも呼ばれ、予め決められたURLでなくてもアクセスした際のURLに応じたページを表示したりと汎用的なことができます。<br><br>動的ルーティングのページは[id].jsxのようなファイル名となり、SSGを利用するためにこの[id]に対するパス名をgetStaticPathsを用いて事前に決めていきます。<br><br>動的ルーティングについてはこちらで詳しく紹介しています。<br><a style="color:#1784e9" href="https://digisquare.jp/blog/4" target="_blank" rel="noopener noreferrer">[入門]Next.jsのダイナミックルーティング作成方法</a><br></p><h3 id="h59f744c0be">実際のコード</h3><p>では、getStaticPathsを用いてパスの設定方法を実際のコードとともに説明します。<br><br>getStaticPaths関数はasyncを必ず使用し、pathsの中にあらかじめ登録しておくパスを入れます。<br><br>今回は[id].jsxを例に出していますが、仮に[slug].jsxを作成した場合は以下のコードにある「id」が「slug」となります。<br></p><pre><code>// [id].jsx
export const getStaticPaths = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;paths: [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ params: { id: '1'} },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ params: { id: '2'} },
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// こんな感じで続く
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fallback: false
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><h4 id="h21d3debdfe">fallbackについて</h4><p>getStaticPathsで定義しなかったパスにアクセスした際の処理をfallbackを用いることで決めることができます。<br>fallbackにはtrue, false, 'blocking'の3つの値があります。<br><br>以下コードのfallbackにそれぞれの値を入れて検証していきます。<br>(fallbackの動作を確認したいため、getStaticPathsで定義していないパスにアクセスします。)<br></p><pre><code>// [id].jsx

const FallbackTest = ({ title }) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;Fallbackのテスト&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;{ title }&lt;/h1&gt;// ここにはgetStaticPropsから渡された値のtitle(タイトル)が入ります
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;)
}

export default FallbackTest;

export const getStaticPaths = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;paths: [
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ params: { id: String(1) } }// 定義しているパスは1のみ
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fallback: // ここにそれぞれの値を入れてみる
&nbsp;&nbsp;&nbsp;&nbsp;}
}

export const getStaticProps = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;props: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title: "タイトル"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><h5 id="h846ae80615">trueにした場合</h5><p>trueの場合、ページを読み込むと「Fallbackのテスト」のみ最初に表示され、その後に「タイトル」が表示されます。<br>これはサーバーサイドでHTMLファイルの生成が完了するまでの間、生成完了前のデータを表示するためです。<br>生成完了後は出来上がったデータを表示します。<br></p><h5 id="hf5378d359e">falseにした場合</h5><p>falseの場合は404エラーを返却するため上記のページコンポーネントとは異なったページが表示されます。<br></p><h5 id="h011f024988">'blocking'にした場合</h5><p>blockingを設定していると「Fallbackのテスト」と「タイトル」が同時に表示されます。<br>これはサーバーサイドでHTMLファイルを生成してからブラウザに渡すためです。<br>そのため途中から表示内容が変わることはありません。<br><br>また、この値だけ''がついているのに気が付いたでしょうか。<br>上記のtrueとfalseについてはbool型で、blockingは文字列となるため''をつける必要があります。<br></p><h2 id="h9be0c3393d">おわりに</h2><p>getStaticPathsはgetStaticPropsと一緒に使用する必要があるので興味のある方はぜひこちらの記事もご覧ください。<br><a style="color:#1784e9" href="http://127.0.0.1:8000/blog/8" target="_blank" rel="noopener noreferrer">[入門]Next.jsのgetStaticPropsについて</a><br><br>最後までご覧くださりありがとうございました。</p>

【入門】Next.jsのgetStaticPathsについて

Node.jsのバージョンを17へアップデート後、いつも通りnpm run devすると見たことないエラー文が出てきました。

<h2 id="h8d027c8ed3">はじめに</h2><p>私は普段、Next.jsを使用しているのですが、nodeをアップデートしnpm run devを実行したら、その直後にエラーが発生し強制終了してしまったので解決策を調べてみました。</p><h2 id="h9bbb0bca62">開発環境</h2><p>Node.js v17.0.1<br>npm v8.1.0<br>macOS BigSur</p><h2 id="he45680f0bc">参考記事</h2><p><a style="color:#1784e9" href="https://github.com/webpack/webpack/issues/14532" target="_blank" rel="noopener noreferrer">nodejs 17: digital envelope routines::unsupported #14532</a></p><h3 id="hdbdf25c00f">エラー文</h3><pre><code>node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);

Error: error:0308010C:digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'</code></pre><h2 id="had0b1b94af">解決方法</h2><p>package.json内のscriptsを以下の様に編集。<br>最初はbuildにNodeのオプションをつけていたのですが、vercelへのデプロイが上手くいかなかったので新しくlegacy-buildを作成し、通常のbuildとは切り離して考えています。</p><pre><code>"scripts": {
&nbsp;&nbsp;&nbsp;&nbsp;"dev": "export NODE_OPTIONS=--openssl-legacy-provider; next dev",
&nbsp;&nbsp;&nbsp;&nbsp;"build": "next build",
&nbsp;&nbsp;&nbsp;&nbsp;"legacy-build: "export NODE_OPTIONS=--openssl-legacy-provider; next build",
&nbsp;&nbsp;&nbsp;&nbsp;// start等は省略
}</code></pre><h3 id="h29425a3486">なぜ、エラーが発生したのか</h3><p>Node.jsはバージョン17以降、OpenSSLが1.1.0から3.0.0にアップデートしました。<br>そのためにnode v16以前で機能していたOpenSSLとは互換性がなく、今回のようなエラーが発生してしまったようです。</p><h2 id="ha214098e44">まとめ</h2><p>今回は開発環境立ち上げ時とビルド時の処理としてOpenSSLのレガシープロバイダーを利用するオプションを記述してありますが、v17が落ち着くまでの間、v16以前へダウングレードするのも一つの手かもしれませんね。<br><br>この記事がお役に立てば幸いです。</p>

Node.jsをアップデートしたらエラーが発生し、強制終了する

SSGまたはISRにするため配列を作成後、ページネーションがある一覧ページのパス生成をしてみました。

<h2 id="h8d027c8ed3">はじめに</h2><p>ページネーション機能のある一覧ページをSSGまたはISRにしようとした際に配列の作成を行い実装したのでこの記事を作成しました。<br></p><h3 id="h488aedbc12">実装していく上での要点</h3><p>APIサーバ(Django REST frameworkを使用)とWebサーバ(Next.js)を使用しています。<br><br>APIサーバは1ページあたりに表示する記事数を設定しており、Webサーバからリクエストがきた際にページネーションで扱うページ数を返すようにしています。<br>(1ページあたり表示する記事の数が6で記事数が12の場合、ページ数は2なので2をWebサーバへ返します)<br><br>正直なところ、今回のAPIサーバはページネーションで扱っているページ数を返しているだけなのでWebサーバだけでも実現可能ですが、「せっかくならAPIサーバを利用しよう」ということでこんな処理になっています。<br></p><h3 id="h9191248b17">実装の流れ</h3><p>APIサーバへリクエストを送り、ページネーションのページ数を取得。<br>1から取得したページ数までが埋まった配列を作成後、mapしgetStaticPathsのpathsとして登録します。<br><br></p><h3 id="h4a11fa49e6">なぜ配列を作成する必要があったのか</h3><p>SSGやISRを実装する上でgetStaticPathsは必須であり、このgetStaticPathsには扱うURLを以下の形式で事前に登録しなければいけないためです。<br>そのため1からページネーションで扱うページ数までが含まれている配列を用意しなければいけませんでした。<br></p><pre><code>// [id].tsxの時
[
&nbsp;&nbsp;&nbsp;&nbsp;params: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ id: '1' }
&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;params: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{ id: '2' }
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;// こんな感じで続く
]</code></pre><h2 id="hb76ab553a8">JavaScriptでの配列作成</h2><p>まずはじめに、JavaScriptでの配列作成方法についてご説明します。<br></p><h3 id="h1d6d0d0cf6">最小値から最大値で中身を埋めて配列を作成する関数</h3><p>1からページネーションで取り扱うページ数までの数値を含んだ配列作成にはstartを1と固定してもいいのですが、汎用性を考慮してstartの値は引数として受け取れるようにしました。<br></p><pre><code>const array = (start, end) =&gt;
&nbsp;&nbsp;&nbsp;&nbsp;[...Array(end - start -1)].map((_, i) =&gt; start + i)</code></pre><h3 id="h4d849f4362">使い方</h3><p>上記の関数を定義後、以下のコードを実行すると[1,2, 3, 4, 5]となる配列を作成できるかと思います。<br></p><pre><code>array(1, 5);</code></pre><h2 id="h90edbb9aba">getStaticPathsの記述</h2><p>&nbsp;配列の作成方法を確認できたら、次に本来の目的である動的ルーティングを作成していきます。<br></p><pre><code>export const getStaticPaths = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const paths = await [生成するURLを返す関数]();// 後で記述します
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;paths,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fallback: false// falseにしておくことで生成されていないパスへのアクセスに404を返す
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><h3 id="hab42dcd649">生成するURLを返す関数</h3><p>次にconst pathsに対応する処理を記述していきます。<br>page_totalはページネーションで扱うページ数を表しています。<br></p><pre><code>import axios from "axios"// インストールも忘れずに

const [登録するURLを返す関数] = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const array = (start, end) =&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[...Array(end - start + 1)].map((_, i) =&gt; start + i)

&nbsp;&nbsp;&nbsp;&nbsp;const res = await axios({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;method: "GET",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: [page_totalを返すAPIサーバのURL],
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;const page_total = await res.data.page_total;
&nbsp;&nbsp;&nbsp;&nbsp;return array(1, page_total).map((pageNumber) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;params: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;id: String(pageNumber)
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;});
}</code></pre><p>先ほど作成したarray関数を用いて、1からページネーションで扱う数(page_total)までの配列を作成しています。<br>私はpage_totalを取得するのにaxiosを使用していますが、fetchでも問題ありません。<br><br>これでページネーションを扱っている記事一覧のURLを事前に登録しておくことができました。<br></p><h3 id="h9be0c3393d">おわりに</h3><p>いかがだったでしょうか。<br><br>私は今回ページネーションを用いた一覧ページをISRにしたかったため新しく配列を作成し、ダイナミックルートの生成を試みました。<br><br>この記事がお役に立てば幸いです。<br>最後までご覧くださりありがとうございました。</p>

【Next.js】配列を使用して動的ルーティング生成

SSGを実現するのに欠かせないNext.jsのgetStaticPropsについて初心者の方に向けて簡単にご説明します。

<h2 id="h8d027c8ed3">はじめに</h2><p>getStaticPropsを理解する上でSSGという概念を知っておくと内容が頭に入りやすいと思うので最初にSSGについて説明します(既にご存知の方は飛ばしていただいても構いません)。<br></p><h3 id="hb782cfc26c">SSGとは</h3><p>SSGとはStatic Site Generationの略で、この技術を利用することで高速なレンダリングを実現できます。<br></p><h4 id="h934b8e623b">なぜ高速なのか</h4><p>レンダリングに関する技術として他にCSRやSSRといった技術があります。<br>この2つはユーザがウェブサイトにアクセスしてから様々な部品をまとめて1つのHTMLファイルを生成し、ページを表示します。<br><br>それに対してSSGはサイトのビルド時にHTMLファイルを事前に生成しておくため、サイトにアクセスしたユーザへ生成済みのHTMLファイルを渡すだけで済みます。<br>そのため、サイトにアクセスしてからHTMLファイルを生成する手間がなく、高速なレンダリングが可能となります。<br></p><h4 id="h9e2f65f7b4">SSGを利用するためには</h4><p>SSGは事前にHTMLファイルを用意する必要があるため、生成時に必要なデータを前もって決めておく必要があります。<br>そこで使用するのがgetStaticPropsです。<br></p><h3 id="hedbc5dfbee">getStaticPropsについて</h3><p>getStaticPropsについてはHTMLファイルを事前生成する際に必要なデータを決めておくものと考えるとイメージがしやすいかと思います。<br></p><h4 id="h59f744c0be">実際のコード</h4><p>getStaticPropsは関数として定義して使用します。<br><br>下記にはページコンポーネントとしてPageを定義し、HTML生成に必要なデータ(props)をgetStaticPropsから受け取っています。<br></p><pre><code>const Page = (props) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;{ props.title }&lt;/h1&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;{ props.description }&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;)
}

export default Page;</code></pre><p>props内にページで扱いたいデータを記述し、ページコンポーネントへpropsを渡します。<br></p><pre><code>export const getStaticProps = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;props: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// ページコンポーネントに渡したいものを記述
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;title: "タイトル",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;description: "説明です。"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><p>これをビルドすることでh1タグの中には「タイトル」が入り、pタグには「説明です。」が入ったHTMLファイルを生成できます。<br><br>ちなみに開発環境ではnpm run dev後、ページにアクセスすると自動的にページをビルドしてくれます。<br><br>ただ、上記のコードを見ると「だったら直接タグの中に記述した方が良くない？」と思った方もいらっしゃるかと思います。<br><br>その通りです。<br>ではこのgetStaticPropsの実力が発揮される時はどんな時なのか。<br><br>それは、外部データを取得してページ内で扱いたい時です。<br></p><h4 id="h72ec3e6d1a">一般的な使用方法</h4><p>外部データを持ってくる関数として新たにgetArticleDataを作成しました。<br><br>以下のようにしてデータを持ってきていますが、データフェッチングをした経験がない方は少々ややこしく感じてしまうかもしれません。<br><br>ここで大切なのはgetStaticPropsのpropsへJSONを入れているということなので「getArticleDataは外部から持ってきたJSONをgetStaticPropsのarticleに渡してるんだな〜」くらいの認識で大丈夫です。<br></p><pre><code>import axios from "axios";// インストールも忘れずに

const getArticleData = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const res = await axios({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;method: "GET",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url: "https://hoge.com/article",// データを取得するサイトのURL
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;// エラー処理等はお好みで
&nbsp;&nbsp;&nbsp;&nbsp;const article = await res.data;
&nbsp;&nbsp;&nbsp;&nbsp;return article;
}
const Page = (props) =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;return (
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;{ props.article.title }&lt;/h1&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;{ props.article.description }&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;)
}
export const getStaticProps = async () =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;const article = await getArticleData();// 外部データを取得しそれをreturnする関数
&nbsp;&nbsp;&nbsp;&nbsp;return {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;props: {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;article
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;}
}</code></pre><p>getArticleDataで行った外部データの取得からHTMLの生成までビルド時に実行されるため、サイトアクセス時に外部からデータを取得して、次にページを生成して....なんて手間がなくなるわけですね。<br></p><h3 id="h1be95aba8c">JSONについて</h3><p>JSONについて初めて耳にした方向けに簡単にまとめてみました。<br><br>外部とデータのやり取りを行う際には一般的にJSON(JavaScript Object Notation)と呼ばれるものを使います。<br>getArticleDataではaxiosと呼ばれるJavaScriptのライブラリを使用して以下のようなJSONデータを取得しています。<br></p><pre><code>{
&nbsp;&nbsp;&nbsp;&nbsp;"title": "タイトル",
&nbsp;&nbsp;&nbsp;&nbsp;"description": "記事説明です。"
}</code></pre><p><br></p><h2 id="h9be0c3393d">おわりに</h2><p>いかがだったでしょうか。<br><br>Next.jsにはgetStaticPropsの他にgetStaticPathsという便利な関数も用意されているので気になった方はこちらもぜひご覧ください。<br><a style="color:#1784e9" href="https://digisquare.jp/blog/8" target="_blank" rel="noopener noreferrer">[入門]Next.jsのgetStaticPathsについて</a><br><br>最後までご覧くださりありがとうございました。</p>

Next.jsの記事
Article filter by Next.js

【入門】Next.jsのgetStaticPathsについて

Node.jsをアップデートしたらエラーが発生し、強制終了する

【Next.js】配列を使用して動的ルーティング生成

【入門】Next.jsのgetStaticPropsについて

- Introduction -

Espressの成り立ちとデジタルクリエイティブにおける想い

Next.jsの記事Article filter by Next.js

【入門】Next.jsのgetStaticPathsについて

Node.jsをアップデートしたらエラーが発生し、強制終了する

【Next.js】配列を使用して動的ルーティング生成

【入門】Next.jsのgetStaticPropsについて

- Introduction -

Espressの成り立ちとデジタルクリエイティブにおける想い

Next.jsの記事
Article filter by Next.js