ハンバーガーメニューのサンプルです。 ネットサーフィンで見つけたのをそのままコピーしてます。 components/navbar.js を作成します。 ※ CSSとしてTailwind CSSが入ってる前提です。<pre><code>import Link from 'next/link'
import { useState } from 'react';

export const Navbar = () =&gt; {
&nbsp;const [active, setActive] = useState(false);
&nbsp;const handleClick = () =&gt; {
&nbsp; setActive(!active);
&nbsp;};

&nbsp;return (
&nbsp; &lt;&gt;
&nbsp; &nbsp;&lt;nav className='flex items-center flex-wrap bg-green-400 p-3 '&gt;
&nbsp; &nbsp; &lt;Link href='/'&gt;
&nbsp; &nbsp; &nbsp;&lt;a className='inline-flex items-center p-2 mr-4 '&gt;
&nbsp; &nbsp; &nbsp; &lt;svg
&nbsp; &nbsp; &nbsp; &nbsp;viewBox='0 0 24 24'
&nbsp; &nbsp; &nbsp; &nbsp;xmlns='http://www.w3.org/2000/svg'
&nbsp; &nbsp; &nbsp; &nbsp;className='fill-current text-white h-8 w-8 mr-2'
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;path d='M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z' /&gt;
&nbsp; &nbsp; &nbsp; &lt;/svg&gt;
&nbsp; &nbsp; &nbsp; &lt;span className='text-xl text-white font-bold uppercase tracking-wide'&gt;
&nbsp; &nbsp; &nbsp; &nbsp;Talwind CSS
&nbsp; &nbsp; &nbsp; &lt;/span&gt;
&nbsp; &nbsp; &nbsp;&lt;/a&gt;
&nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &lt;button
&nbsp; &nbsp; &nbsp;className=' inline-flex p-3 hover:bg-green-600 rounded lg:hidden text-white ml-auto hover:text-white outline-none'
&nbsp; &nbsp; &nbsp;onClick={handleClick}
&nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp;&lt;svg
&nbsp; &nbsp; &nbsp; className='w-6 h-6'
&nbsp; &nbsp; &nbsp; fill='none'
&nbsp; &nbsp; &nbsp; stroke='currentColor'
&nbsp; &nbsp; &nbsp; viewBox='0 0 24 24'
&nbsp; &nbsp; &nbsp; xmlns='http://www.w3.org/2000/svg'
&nbsp; &nbsp; &nbsp;&gt;
&nbsp; &nbsp; &nbsp; &lt;path
&nbsp; &nbsp; &nbsp; &nbsp;strokeLinecap='round'
&nbsp; &nbsp; &nbsp; &nbsp;strokeLinejoin='round'
&nbsp; &nbsp; &nbsp; &nbsp;strokeWidth={2}
&nbsp; &nbsp; &nbsp; &nbsp;d='M4 6h16M4 12h16M4 18h16'
&nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp;&lt;/svg&gt;
&nbsp; &nbsp; &lt;/button&gt;
&nbsp; &nbsp; {/*Note that in this div we will use a ternary operator to decide whether or not to display the content of the div */}
&nbsp; &nbsp; &lt;div
&nbsp; &nbsp; &nbsp;className={`${active ? '' : 'hidden'
&nbsp; &nbsp; &nbsp; }&nbsp; w-full lg:inline-flex lg:flex-grow lg:w-auto`}
&nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp;&lt;div className='lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start flex flex-col lg:h-auto'&gt;
&nbsp; &nbsp; &nbsp; &lt;Link href='/'&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white '&gt;
&nbsp; &nbsp; &nbsp; &nbsp; Home
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &lt;Link href='/'&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; Services
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &lt;Link href='/'&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; About us
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &lt;Link href='/'&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'&gt;
&nbsp; &nbsp; &nbsp; &nbsp; Contact us
&nbsp; &nbsp; &nbsp; &nbsp;&lt;/a&gt;
&nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp;&lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp;&lt;/nav&gt;
&nbsp; &lt;/&gt;
&nbsp;);
};</code></pre> そして、メニューを表示させるページ index.jsにて、<pre><code>import { Navbar } from '../components/navbar'

export default function Home() {
&nbsp;return (
 ...
 &lt;Navbar /&gt;
 ...
 )
}</code></pre>

Tailwind CSSでハンバーガーメニュー（Next.js）

前回インストールしたFullCalendarに、祝日とか表示させたり、 イベント情報を表示させたりします！ 祝日の表示 ググると、よくあるのはGoogleカレンダーAPIから祝日データをゲットしよう。 というものだけど、GoogleカレンダーのAPIの取得がよく分からない。 Googleってよく画面とか変更するからなぁ・・・ しばらくこれで悩んでおりましたが、面倒なので辞めました。 ググってる中で、<a href="https://holidays-jp.github.io/" target="_blank" rel="noopener noreferrer">Holidays JP API</a>というのを発見！ これを利用することにしました。 URL <a href="https://holidays-jp.github.io/api/v1/date.json" target="_blank" rel="noopener noreferrer">https://holidays-jp.github.io/api/v1/date.json</a> 見てみますと、<pre><code>{
&nbsp;"2017-01-01": "元日",
&nbsp;"2017-01-02": "元日 振替休日",
&nbsp;"2017-01-09": "成人の日"
}</code></pre>こんな感じのJSONデータです。 イベント情報 これは前回ちょっと書きましたが、 microCMSで入力したデータをAPIで持ってきます。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/b8ee5275e1a947eb96f9924dcfe79dd1/microCMS.png" alt=""> page/cal.js（カレンダー表示ページ）の全コードです。<pre><code>import Layout from '../components/layout'
import Link from 'next/link'
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'

export default function Callendar({ events, holidaysData }) {

&nbsp;const allevents = events.map((event) =&gt; (
&nbsp;&nbsp;{ title: `${event.title}`, start: `${event.eDateStart}`, end: `${event.eDateEnd}`, url: `/event/${event.id}` }
&nbsp;))

&nbsp;const holidays = Object.keys(holidaysData)
&nbsp;let holidaysDates = []
&nbsp;for (let i = 0; i &lt; holidays.length; i++) {
&nbsp;&nbsp;let holiday = {
&nbsp;&nbsp;&nbsp;title: holidaysData[holidays[i]],
&nbsp;&nbsp;&nbsp;start: holidays[i],
&nbsp;&nbsp;&nbsp;className: "holiday",
&nbsp;&nbsp;&nbsp;holiday: holidays[i],
&nbsp;&nbsp;&nbsp;display: 'background',
&nbsp;&nbsp;&nbsp;color: 'pink',
&nbsp;&nbsp;}
&nbsp;&nbsp;holidaysDates.push(holiday)
&nbsp;}

&nbsp;const wholeEvents = allevents.concat(holidaysDates)

&nbsp;return (
&nbsp;&nbsp;&lt;Layout
&nbsp;&nbsp;&nbsp;title="カレンダー：K1ファクトリー 浜松市西区雄踏町でホームページ制作・チラシ・ポスターデータ制作ほか"
&nbsp;&nbsp;&nbsp;description="fullcalendarをお試し中です。"
&nbsp;&nbsp;&gt;

&nbsp;&nbsp;&nbsp;&lt;div className="text-center"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1 className="text-sm z-1 pt-8"&gt;カレンダー表示&lt;/h1&gt;
&nbsp;&nbsp;&nbsp;&lt;/div&gt;

&nbsp;&nbsp;&nbsp;&lt;div className="px-6 pt-20 text-center bg-white"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;FullCalendar
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;plugins={[dayGridPlugin]}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locale="ja"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstDay="1"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;businessHours={false}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;events={wholeEvents}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dayCellContent={(e) =&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(e.dayNumberText = e.dayNumberText.replace("日", ""));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;displayEventTime={true}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;displayEventEnd={true}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eventTimeFormat={{ day: 'numeric', hour: 'numeric', minute: '2-digit' }}
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Link href="/" passHref&gt;&lt;button className="bg-blue-700 hover:bg-blue-500 text-white font-bold py-2 px-10 mb-10 rounded text-sm md:text-base xl:text-lg"&gt;トップページに戻る&lt;/button&gt;&lt;/Link&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/section&gt;

&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&lt;style global jsx&gt;{`
&nbsp;&nbsp;&nbsp;&nbsp;td.fc-day-sun {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:#ffeaea;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;td.fc-day-sat {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color:#eaf4ff;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;&nbsp;.holiday {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: red;
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;&nbsp;`}&lt;/style&gt;
&nbsp;&nbsp;&lt;/Layout &gt;
&nbsp;)
}

export const getStaticProps = async () =&gt; {
&nbsp;const key = {
&nbsp;&nbsp;headers: { 'X-API-KEY': process.env.EVENTS_API_KEY },
&nbsp;}
&nbsp;const data = await fetch('https://k1events.microcms.io/api/v1/events?limit=100', key)
&nbsp;&nbsp;.then(res =&gt; res.json())
&nbsp;&nbsp;.catch(() =&gt; null)

&nbsp;const hdata = await fetch('https://holidays-jp.github.io/api/v1/date.json')
&nbsp;&nbsp;.then(res =&gt; res.json())
&nbsp;&nbsp;.catch(() =&gt; null)

&nbsp;return {
&nbsp;&nbsp;props: {
&nbsp;&nbsp;&nbsp;events: data.contents,
&nbsp;&nbsp;&nbsp;holidaysData: hdata
&nbsp;&nbsp;},
&nbsp;};
};</code></pre> まずは、 getStaticPropsを使って、イベント情報と日本の祝日情報のAPIを読み込みます。<pre><code>export const getStaticProps = async () =&gt; {
&nbsp;const key = {
&nbsp;&nbsp;headers: { 'X-API-KEY': process.env.EVENTS_API_KEY },
&nbsp;}
&nbsp;const data = await fetch('https://k1events.microcms.io/api/v1/events?limit=100', key)
&nbsp;&nbsp;.then(res =&gt; res.json())
&nbsp;&nbsp;.catch(() =&gt; null)

&nbsp;const hdata = await fetch('https://holidays-jp.github.io/api/v1/date.json')
&nbsp;&nbsp;.then(res =&gt; res.json())
&nbsp;&nbsp;.catch(() =&gt; null)

&nbsp;return {
&nbsp;&nbsp;props: {
&nbsp;&nbsp;&nbsp;events: data.contents,
&nbsp;&nbsp;&nbsp;holidaysData: hdata
&nbsp;&nbsp;},
&nbsp;};
};</code></pre> headers: { 'X-API-KEY': process.env.EVENTS_API_KEY } .env .env.development.localファイルで EVENTS_API_KEYを設定しておきます。 ※API_KEYはmicroCMSの管理画面で確認してね。 &nbsp;const data = await fetch('https://k1events.microcms.io/api/v1/events?limit=100', key) &nbsp;&nbsp;.then(res =&gt; res.json()) &nbsp;&nbsp;.catch(() =&gt; null) ここで、microCMSからAPIでイベント情報をゲット！ &nbsp;const hdata = await fetch('https://holidays-jp.github.io/api/v1/date.json') &nbsp;&nbsp;.then(res =&gt; res.json()) &nbsp;&nbsp;.catch(() =&gt; null) 日本の休日も同じようにゲット！こちらはとくにKEYとかないのです。 returnでAPIで取得したデータを返しています。 そして、ページ表示部分へ&nbsp; returnされたprops（プロパティ）データがページ表示に使われます。 export default function Callendar({ events, holidaysData }) { 	… } 「allevents」配列定数に、APIでゲットしたイベント情報データを fullcalendar表示に適応・変形したデータを代入。 { title: "イベント名", start: "イベント開始日時", end: "イベント終了日時", url: "リンク（詳細ページへの）"}, map関数でイベント数分のデータを作っていきます。<pre><code>&nbsp;const allevents = events.map((event) =&gt; (
&nbsp;&nbsp;{ title: `${event.title}`, start: `${event.eDateStart}`, end: `${event.eDateEnd}`, url: `/event/${event.id}` }
&nbsp;))</code></pre>&nbsp;&nbsp; 「holidaysDates」配列変数に、日本の祝日データを適応・変形したデータを代入。<pre><code>&nbsp;const holidays = Object.keys(holidaysData)
&nbsp;let holidaysDates = []
&nbsp;for (let i = 0; i &lt; holidays.length; i++) {
&nbsp;&nbsp;let holiday = {
&nbsp;&nbsp;&nbsp;title: holidaysData[holidays[i]],
&nbsp;&nbsp;&nbsp;start: holidays[i],
&nbsp;&nbsp;&nbsp;className: "holiday",
&nbsp;&nbsp;&nbsp;holiday: holidays[i],
&nbsp;&nbsp;&nbsp;display: 'background',
&nbsp;&nbsp;&nbsp;color: 'pink',
&nbsp;&nbsp;}
&nbsp;&nbsp;holidaysDates.push(holiday)
&nbsp;}</code></pre> APIからよみこんだ「holidaysData」をObject.keys関数で変形させて、「holidays」に代入。 「holidays」の１つ１つを「holiday」としてそれらを push関数で合わせて配列「holidaysDates」にします。 「holiday」それぞれのデータには、 className「holiday」をつけて、 display: 'background', color: 'pink',　で、背景にピンク色をつける表示にしています。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/3f2db78f41914da2893a57fad24caf0f/holiday.png" alt=""> 最後に、イベント情報の配列「allevents」と、祝日の配列「holidaysDates」を合体！ &nbsp;const wholeEvents = allevents.concat(holidaysDates) 「wholeEvents」というデータが完成！これをFullCalendarで表示してやります。 <pre><code>&lt;FullCalendar
	plugins={[dayGridPlugin]}
	locale="ja"
	firstDay="1"
	events={wholeEvents}
	dayCellContent={(e) =&gt;
		(e.dayNumberText = e.dayNumberText.replace("日", ""));
	}
	displayEventTime={true}
	displayEventEnd={true}
	eventTimeFormat={{ day: 'numeric', hour: 'numeric', minute: '2-digit' }}
/&gt;</code></pre> plugins={[dayGridPlugin]}：月表示 locale="ja"：日本語表記 firstDay="1"：月曜日から表示 events={wholeEvents}：イベント情報と祝日情報指定（上で作ったデータですね） dayCellContent={(e) =&gt; 		(e.dayNumberText = e.dayNumberText.replace("日", "")) }：カレンダーの日にちの「日」を削除 displayEventTime={true} displayEventEnd={true} eventTimeFormat={{ day: 'numeric', hour: 'numeric', minute: '2-digit' }} ：イベント情報の表示の仕方「何日 xx:xx - 何日 xx:xx」 土日と祝日の文字色は、スタイルシートで変更しています。<pre><code>&lt;style global jsx&gt;{`
	td.fc-day-sun {
		background-color:#ffeaea;
	}
	td.fc-day-sat {
		background-color:#eaf4ff;
	}
	.holiday {
		color: red;
	}
`}&lt;/style&gt;</code></pre> 以上です！ <a href="/cal">出来上がりのカレンダーページ。</a> あとは、イベント情報のリンク先（詳細）ページを作ってあげれば完成ですね。

Next.jsサイトでのFullCalendarカスタマイズ

<a href="https://qiita.com/yk2220s/items/8ed4d781412f6c4e9c45" target="_blank" rel="noopener noreferrer">参照サイト「Next.js + Fullcalendar v5 を攻略する」</a> イベント告知ページを作りたいので、 ヘッドレスCMSであるMicroCMSにて、イベント情報・画像を投稿し、 APIにて情報を取得し、一覧表示、詳細表示をさせ、 カレンダーにもそのイベント情報を表示させたいとおもっています。 イベント情報の表示は、このブログ同様にすればいけそうなので、 今回はカレンダーにイベント情報（タイトル）を表示させるために、 まずはNext.jsで表示できるカレンダーライブラリを探し、 FullCalendarってのがよさげなので試してみました。 参照サイトにそって、 FullCalendarをインストールします。<pre><code>$ npm install --save @fullcalendar/react @fullcalendar/daygrid</code></pre>カレンダーのビューに使うプラグインのdaygridもインストールしています。 カレンダー表示ページの作成（cal.js）<pre><code>import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

export default function Callendar() {
&nbsp;return (
&nbsp;&nbsp;&lt;div className="px-6 pt-20 text-center bg-white"&gt;
&nbsp;&nbsp;&lt;section&gt;
&nbsp;&nbsp;&nbsp;&lt;FullCalendar
&nbsp;&nbsp;&nbsp;plugins={[dayGridPlugin]}
&nbsp;&nbsp;&nbsp;initialEvents={[{ title: "イベント", start: new Date() }]}
&nbsp;&nbsp;&nbsp;/&gt;
&nbsp;&nbsp;&lt;/section&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&lt;/Layout &gt;
&nbsp;)
}</code></pre> &lt;FullCalendar ... /&gt;このタグでカレンダーを表示してるんですね。 でも、これだけでは表示できないんです。参照サイトでも書かれてますが、 npm run dev すると、 Global CSS cannot be imported from within node_modules. というエラーが出てしまいます。 Next.jsではnode_modules内のファイルからCSSのインポート禁止なんだそうです。 FullCalendarでnode_modules内のファイルからCSSをインポートしてました！ だめじゃん！！ ということで、参照サイトの解決策を実行！ 解決のためのステップ１「next-transpile-modules」をインストール ESMで書かれているFullCalendarをトランスパイルできるようにします。 ※ESM：ESモジュールの略　トランスパイル：ある言語で書かれたコードを元に別の言語のコードを生成すること。 ES6で書かれたコードを元にES5のシンタックスにしたコードを生成すること。 要は、最新のコードで書かれたプログラムを古いブラウザでも実行できるコードにするってことのようです。 そのための「next-transpile-modules」です。 ということで、インストール！<pre><code>$ npm install next-transpile-modules@^4.1.0</code></pre>実は最新版はver 8だったりするんですけど、うまくいかないので古いバージョンを使います。 インストールしたら、次に next.config.js を変更します。 もともとは、以下のような内容だったのですが、<pre><code>module.exports = {
&nbsp;reactStrictMode: true,
&nbsp;images: {
&nbsp;	domains: ['images.microcms-assets.io'],
&nbsp;},
}</code></pre> 以下のようにします！<pre><code>const withTM = require("next-transpile-modules")(["@fullcalendar"]);
module.exports = withTM({
&nbsp;webpack5: false, // &lt;---これ重要！
&nbsp;reactStrictMode: true,
&nbsp;images: {
&nbsp;	domains: ['images.microcms-assets.io'],
&nbsp;},
});</code></pre> 参照サイトにはなかったんですが、 webpack5: false, を追記してます！！ これは、webpack5は使わないで、webpack4を使います。ということです。 というのも、webpack5だとどうしてもエラーが出て表示できなかったからです。 本当は webpack5でもできるのかもしれないのですが、 現在、対策がわかりません。ご存知の方は教えて下さい。 ステップ２「babel-plugin-transform-require-ignore」をインストール<pre><code>$ npm i babel-plugin-transform-require-ignore</code></pre> babel.config.js ファイルを追加します。（私の環境ではなかったので追加しました）<pre><code>module.exports = {
 presets: ["next/babel"],
 overrides: [
 {
 include: ["./node_modules/@fullcalendar"],
 plugins: [
 [
 "babel-plugin-transform-require-ignore",
 {
 extensions: [".css"],
 },
 ],
 ],
 },
 ],
};</code></pre>これで、".node_modules/@fullcalendar" 内のファイルから .css をインポートしている部分を削除することができます。 Next.jsでのエラーに対応してるんですね。 以上で、fullcalendarが表示できるようになります。 ですが、babel.config.jsファイルにて、CSSのインポートを削除してるので、 スタイルシートが全く効いてない状況なので、改めてCSSを読み込んであげます。 cal.jsにて、<pre><code>import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'</code></pre>を追記してあげます。 最終的には以下のようなコードになります。 cal.js<pre><code>import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import '@fullcalendar/common/main.css'
import '@fullcalendar/daygrid/main.css'

export default function Callendar() {
&nbsp;return (
&nbsp;&nbsp;&lt;div className="px-6 pt-20 text-center bg-white"&gt;
&nbsp;&nbsp;&lt;section&gt;
&nbsp;&nbsp;&nbsp;&lt;FullCalendar
&nbsp;&nbsp;&nbsp;plugins={[dayGridPlugin]}
&nbsp;&nbsp;&nbsp;initialEvents={[{ title: "イベント", start: new Date() }]}
&nbsp;&nbsp;&nbsp;/&gt;
&nbsp;&nbsp;&lt;/section&gt;
&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&lt;/Layout &gt;
&nbsp;)
}</code></pre>これで、どうでしょう！？ <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/fb29e60aa545473193ff589cdb7936e3/calendar00.png" alt=""> 当サイトの<a href="/cal">カレンダーページ</a> になります。 次回は、このカレンダーにイベントを表示できたらいいなぁ。

FullCalendarを使ってnext.jsでカレンダー表示

Next.jsを使った静的サイト（当サイト）にコメント欄を設けてみました。 静的サイトなので、外部のサービスからJavascriptで読み込んで表示させます。 一番有名らしい、Disqusなども考えてみたんですけど設置するのも利用するのも結構面倒なので、 もっと簡単なのないかな。といろいろ探してると、<a href="https://www.htmlcommentbox.com/" target="_blank" rel="noopener noreferrer">「HTML COMMENT BOX」</a>というのを発見！ Googleアカウントを持ってればすぐ出来るということなので、設置してみました。 まずは、<a href="https://www.htmlcommentbox.com/" target="_blank" rel="noopener noreferrer">「HTML COMMENT BOX」</a>にアクセスして、 Googleアカウントでログインします。 02でコードが表示されるので、コピーします。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/d67e911134dd44f88d6c94c689f251d1/html_comment_box.png" alt=""> コメント欄を貼り付けたいページ、個別詳細ページ（blog/[id].js）にて、 コピーしたコードを貼り付けますが、<pre><code>&lt;!-- begin wwww.htmlcommentbox.com --&gt;
&nbsp;&lt;div id="HCB_comment_box"&gt;&lt;a href="http://www.htmlcommentbox.com"&gt;Widget&lt;/a&gt; is loading comments...&lt;/div&gt;
&nbsp;&lt;link rel="stylesheet" type="text/css" href="https://www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" /&gt;
&nbsp;&lt;script type="text/javascript" id="hcb"&gt; /*&lt;!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="https://www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&amp;mod=%241%24wq1rdBcg%24kz359wLNxjgUbN8GTkGTT1"+"&amp;opts=16798&amp;num=10&amp;ts=1630125174328");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*--&gt;*/ &lt;/script&gt;
&lt;!-- end www.htmlcommentbox.com --&gt;</code></pre> 私は、前半の&lt;div&gt;タグ&lt;link&gt;タグ部分と、 後半の&lt;script&gt;タグ部分を分けて貼り付けました。 前半部分は、 &lt;article&gt;〜&lt;/article&gt;のすぐ後に、&lt;section&gt;タグ内に貼り付けました。<pre><code>&lt;section className="w-full sm:w-4/5 mx-auto p-10 text-sm xl:text-base"
	dangerouslySetInnerHTML={{
		__html: `
			&lt;!-- begin wwww.htmlcommentbox.com --&gt;
			&lt;div id="HCB_comment_box"&gt;&lt;a href="http://www.htmlcommentbox.com"&gt;HTML &lt;/a&gt; is loading comments...&lt;/div&gt;
			&lt;link rel="stylesheet" type="text/css" href="https://www.htmlcommentbox.com/static/skins/bootstrap/twitter-bootstrap.css?v=0" /&gt;
			&lt;!-- end www.htmlcommentbox.com --&gt;
		 `,
	}}
/&gt;</code></pre>dangerouslySetInnerHTMLを使ってそのまま掲載しています。 後半部分は、&lt;script&gt;タグなので、 ファイル冒頭で、<pre><code>import Script from 'next/script'</code></pre>を追記します。（Next.js version11の機能らしい） 先ほど前半部分を載せた&lt;section&gt;タグの後に以下の様に貼り付けました。<pre><code>&lt;Script type="text/javascript" id="hcb"
	dangerouslySetInnerHTML={{
		__html: `
			/*&lt;!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=hcb_user.PAGE || (""+window.location).replace(/'/g,"%27"), h="https://www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&amp;opts=16798&amp;num=10&amp;ts=1630115715575");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*--&gt;*/&nbsp;
		`,
	}}
/&gt;</code></pre>こちらも dangerouslySetInnerHTMLを使ってそのまま掲載しています。 以上です。 このページの下にCommentが表示されてます。 HTML COMMENT BOXの設定については、 <a href="https://hamazof.com/2019/06/20/sirius_comment_htmlcommentbox/" target="_blank" rel="noopener noreferrer">シリウスにコメント欄を設置したい～その４～Html Comment Box編</a>の後半部分の説明を参考にしました。

Next.jsブログにコメント欄を設置してみた

<a href="https://coliss.com/articles/build-websites/operation/css/css-sticky-footer.html" target="_blank" rel="noopener noreferrer">参考サイト「フッタを最下部に表示する5つのテクニック」</a> 当サイトでもページ下部のフッタ（浜松のシルエット）をウインドウ最下部に表示させるために、 上記サイトの5番目の方法（CSS Grid Layout）を使っています。 Tailwinds.cssを使っているので、classNameがコードのようになっております。 components/layout.js<pre><code>export default function Layout(props) {
	return (
		&lt;div className="min-h-screen grid" style={{ gridTemplateRows: 'auto 1fr auto' }}&gt;
			&lt;Head&gt;&lt;/Head&gt;
			&lt;Header /&gt;
			&lt;div&gt;{props.children}&lt;/div&gt;
			&lt;Footer /&gt;
		&lt;/div&gt;
	)
}</code></pre>layoutの一番外側のdivタグに対してスタイルシートが以下の様に設定されています。 min-h-screen：min-height: 100vh;　高さをウインドウいっぱいに grid：display: grid;　Gridレイアウト指定 gridTemplateRows: 'auto 1fr auto'　Grid 3段レイアウト（ヘッダ部分、コンテンツ部分、フッタ部分） ※tailwindsで指定できない部分をインラインスタイルで追加指定しています。 components/footer.js<pre><code>export default function Footer() {
	return (
		&lt;footer className="mx-auto overflow-hidden w-full relative row-start-3 row-end-4" style={{ height: '25.9vw' }}&gt;
			// フッタコンテンツ
		&lt;/footer&gt;
	)
}</code></pre>footerでは、 row-start-3：grid-row-start: 3; row-end-4：grid-row-end: 4; height: '25.9vw'　ウィンドウ幅に対して高さを可変指定。 フッタ部分は、Grid-rowの、3 - 4 になるので、上の様に指定しています。 ※下の開発画面のGrid画像も参照してください。 開発画面でGridボタンがあって、確認することが出来ます。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/4a59cbdfb32343fca6c6ff70d1b40c61/gridbut.png" alt=""> 押すと、、 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/f3eaf54ea3f344c980e2943d0ae8f58d/grid_row.jpg" alt="">

フッタをウインドウ最下部に表示したい（Next.js）

Gatsby.jsでWordPressの場合は、前後の記事のクエリも元からあったみたいだけど、 Next.jsでの場合は、探したけど見当たりませんでした。 でも、やっぱり前後の記事のリンクって欲しいんです、私は。 それで、いろいろ調べてみるもあまり資料はないみたい。 でも、WPGraphQLの公式サイトを眺めてるとなんとなくそれっぽいことが出来そうな気がして、もしかして！？ <a href="https://www.wpgraphql.com/recipes/add-edit-link-to-all-post-types/" target="_blank" rel="noopener noreferrer">WPGraphQLの公式サイト</a> 上のサイトを見てると何となく出来そうじゃねぇ？ あれこれ試行錯誤して、出来たっぽい！やった！ function.phpにてクエリを追加してやることに。 nextPostというクエリを新たに Post クエリの下に作ります。 たまたまできたコードが以下です。（ほんとたまたま。だからベストな方法ではない。） get_next_post_link('%link')で、次の記事のデータをゲット！ %linkというので、「&lt;&lt;」などの余分なものを削除して読み込んでます。 <a href="https://elearn.jp/wpman/function/get_next_post_link.html" target="_blank" rel="noopener noreferrer">参考サイト「WordPress私的マニュアル - elearn.jp」</a> クエリはこんな感じです。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/d6b8d19899cf42babc2be9ae7560394a/graphQL_nextprev.png" alt=""> function.php 「クエリ nextPost 作成」<pre><code>add_action( 'graphql_register_types', function() {
&nbsp;register_graphql_field( 'Post', 'nextPost', [
&nbsp;&nbsp;'type' =&gt; 'String',
&nbsp;&nbsp;'description' =&gt; __( 'Example field added to the Post Type', 'replace-with-your-textdomain' ),
&nbsp;&nbsp;'resolve' =&gt; function( \WPGraphQL\Model\Post $post, $args, $context, $info ) {
&nbsp;&nbsp;&nbsp;return get_next_post_link('%link');&nbsp;&nbsp;
&nbsp;&nbsp;}
&nbsp;]);
});</code></pre> 「クエリ prevPost 作成」<pre><code>add_action( 'graphql_register_types', function() {
&nbsp;register_graphql_field( 'Post', 'prevPost', [
&nbsp;&nbsp;'type' =&gt; 'String',
&nbsp;&nbsp;'description' =&gt; __( 'Example field added to the Post Type', 'replace-with-your-textdomain' ),
&nbsp;&nbsp;'resolve' =&gt; function( \WPGraphQL\Model\Post $post, $args, $context, $info ) {
&nbsp;&nbsp;&nbsp;return get_previous_post_link('%link');&nbsp;&nbsp;
&nbsp;&nbsp;}
&nbsp;]);
});</code></pre> 取得した next_post_link('%link')の値の中身。 &lt;a href=\"http://hogehoge.com/2021/08/12/hello-world/\" rel=\"prev\"&gt;Hello world!&lt;/a&gt; これを　リンクURL　と　リンクテキスト　に分けます。 「http://hogehoge.com/2021/08/12」を取り除いて、「/posts」を頭につける：リンクURLを抜き出す<pre><code>const sourceStr = '&lt;a href="http://hogehoge.com/2021/08/12/hello-world/" rel="prev"&gt;Hello world!&lt;/a&gt;';
const a = sourceStr.split( '"' );
const b = a[1];
const c = b.replace('http://hogehoge.com/', '');
const nextUrl = '/posts' + c.substring(10);</code></pre> リンクテキスト（タイトル「Hello world!」）を抜き出す（上から続けて）<pre><code>const sourceStr = '&lt;a href="http://hogehoge.com/2021/08/12/hello-world/" rel="prev"&gt;Hello world!&lt;/a&gt;';
const e = a[4];
const g = e.substring(1);
const nextTitle = g.replace('&lt;/a&gt;', '');</code></pre> なぜこんなことをしてるかというと… dangerouslySetInnerHTMLでHTMLをそのまま出力では、Reactのメリットである&lt;Link&gt;タグによるリンク移動使えないのです。 だから前後ページのリンクURLとリンクタイトルはそれぞれ取得して、あらためて&lt;Link&gt;タグにて設定してあげてます。 まだまだ完成はしてませんが、これでいけそうな感じです。 もっといい方法があれば教えてください。

Next.js+WordPress+GraphQLで前後の記事へのリンクを設定

ほぼ、<a href="https://qiita.com/dtakkiy/items/52b591a9dc7ac1a749b8" target="_blank" rel="noopener noreferrer">Next.jsにGoogle Analyticsを導入する方法</a>を参照すれば大丈夫です。 Google Analytics IDは取得済みということで、 すすめますね。 .env.localを作成<pre><code>NEXT_PUBLIC_GA_ID=あなたの Google Analytics ID</code></pre> プログラム上では、 process.env.NEXT_PUBLIC_GA_ID　として利用します。 gtag.jsを作成 /lib/gtag.js<pre><code>export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID
export const pageview = (url) =&gt; {
&nbsp;window.gtag('config', GA_TRACKING_ID, {
&nbsp; page_path: url,
&nbsp;})
}
export const event = ({ action, category, label, value }) =&gt; {
&nbsp;window.gtag('event', action, {
&nbsp; event_category: category,
&nbsp; event_label: label,
&nbsp; value: value,
&nbsp;})
}</code></pre> ページが遷移した際の情報（そのままだと遷移してもanalytics出来ない！）をGoogle Analyticsに知らせるため、 _app.jsを変更します。 /pages/_app.js<pre><code>import '../styles/globals.css'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
import * as gtag from '../lib/gtag'

function MyApp({ Component, pageProps }) {
&nbsp;const router = useRouter()
&nbsp;useEffect(() =&gt; {
&nbsp; const handleRouteChange = (url) =&gt; {
&nbsp; &nbsp;gtag.pageview(url)
&nbsp; }
&nbsp; router.events.on('routeChangeComplete', handleRouteChange)
&nbsp; return () =&gt; {
&nbsp; &nbsp;router.events.off('routeChangeComplete', handleRouteChange)
&nbsp; }
&nbsp;}, [router.events])
&nbsp;return &lt;Component {...pageProps} /&gt;
}
export default MyApp</code></pre> ページのヘッダ情報にgoogle tagmanagerのスクリプトタグを追加するために、 _document.jsを変更します。 /pages/_document.js<pre><code>import Document, { Html, Head, Main, NextScript } from 'next/document'
import { GA_TRACKING_ID } from '../lib/gtag'

export default class MyDocument extends Document {
&nbsp;render() {
&nbsp; return (
&nbsp; &nbsp;&lt;Html lang="ja"&gt;
&nbsp; &nbsp; &lt;Head&gt;
&nbsp; &nbsp; &nbsp;{/* Global Site Tag (gtag.js) - Google Analytics */}
&nbsp; &nbsp; &nbsp;&lt;script
&nbsp; &nbsp; &nbsp; async
&nbsp; &nbsp; &nbsp; src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
&nbsp; &nbsp; &nbsp;/&gt;
&nbsp; &nbsp; &nbsp;&lt;script
&nbsp; &nbsp; &nbsp; dangerouslySetInnerHTML={{
&nbsp; &nbsp; &nbsp; &nbsp;__html: `
&nbsp; &nbsp; &nbsp; window.dataLayer = window.dataLayer || [];
&nbsp; &nbsp; &nbsp; function gtag(){dataLayer.push(arguments);}
&nbsp; &nbsp; &nbsp; gtag('js', new Date());
&nbsp; &nbsp; &nbsp; gtag('config', '${GA_TRACKING_ID}', {
&nbsp; &nbsp; &nbsp; &nbsp;page_path: window.location.pathname,
&nbsp; &nbsp; &nbsp; });
&nbsp; &nbsp; &nbsp;`,
&nbsp; &nbsp; &nbsp; }}
&nbsp; &nbsp; &nbsp;/&gt;
&nbsp; &nbsp; &lt;/Head&gt;
&nbsp; &nbsp; &lt;body&gt;
&nbsp; &nbsp; &nbsp;&lt;Main /&gt;
&nbsp; &nbsp; &nbsp;&lt;NextScript /&gt;
&nbsp; &nbsp; &lt;/body&gt;
&nbsp; &nbsp;&lt;/Html&gt;
&nbsp; )
&nbsp;}
}</code></pre> ここまでの手順で、ページビューの取得が可能になりました。といきたいところですが、 Vercelなどで運営してる場合は、管理画面で Google analyticsID を設定してやる必要があります。 でないと、IDが「undefined」となってしまいます。 「Environment Variables」にてAdd Newしてあげます！ <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/17d87248779c46e7b1c0f251abafc90f/Vercel_Environment.png" alt=""> あとは、Google Analyticsのリアルタイムで動いてるかどうか、チェックしてください。 それと、、、ブラウザの「Brave」を使ってたり（私）つまりは、広告非表示拡張とか、オプトアウト設定？しているか、セキュリティソフトが弾いてるせいでGoogle analyticsが無効になってたりすると計測できないのでご注意を。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/0c413281c10c4e168519c321dc565423/GAerror.png" alt="">

Next.jsにGoogle Analyticsを導入

<a href="/blog/sdp6p46hy">前回は REST APIを使い、</a> <a href="/blog/sdp6p46hy">ヘッドレスCMS化したWordPressのブログを表示</a>してたのですが、 今回は GraphQLを使って表示してみます。 GraphQLというと、同じReactの Gatsby みたいでですね。 まずは WordPressにて「WPGraphQL」プラグインをインストールします。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/5329651aa23b470ab973449ef442d62a/WPGraphQL.png" alt=""> <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/85aa6c253f7249de8beffd934c55aee3/Query.png" alt=""> queri（クエリ）を使って表示するものを指定してるんですね。 ※ちなみにクエリって、検索キーワードとか、 データベースからデータを抽出したり操作したりといった処理を行うための命令のことだそうです。 ところで、WordPressでGraphQLを扱う際には、 Apollo Clientとかいうライブラリを使うといいみたいなことをネットでみるのですが、 まだ不勉強なので、とりあえず、それを使わずにやってみました。 海外のYoutubeで説明されてたので、それを参考にしています。 <a href="https://www.youtube.com/watch?v=bIc6NrPsHjs" target="_blank" rel="noopener noreferrer">Getting Started with Headless WordPress with NEXTJS &amp; WPGRAPHQL</a> <a href="https://github.com/alexander-young/wp-next-headless" target="_blank" rel="noopener noreferrer">この方のGithubにソース</a>があります。 pages/index.js ブログ一覧ページ<pre><code>import Link from 'next/link'

// HTML出力部分
export default function Home({ posts }) {
&nbsp;return (
&nbsp; &lt;div&gt;
&nbsp; &nbsp;{posts.nodes.map(post =&gt; {
&nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp;&lt;ul key={post.slug}&gt;
&nbsp; &nbsp; &nbsp; &lt;li&gt;
&nbsp; &nbsp; &nbsp; &nbsp;&lt;Link href={`/posts/${post.slug}`}&gt;{post.title}&lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &lt;/li&gt;
&nbsp; &nbsp; &nbsp;&lt;/ul&gt;
&nbsp; &nbsp; )
&nbsp; &nbsp;})}
&nbsp; &lt;/div&gt;
&nbsp;)
}

// getStaticProps関数でコンテンツを取得する
export async function getStaticProps() {
&nbsp;const res = await fetch(process.env.WORDPRESS_GRAPHQL_ENDPOINT, {
&nbsp; method: 'POST',
&nbsp; headers: { 'Content-Type': 'application/json' },
&nbsp; body: JSON.stringify({
&nbsp; &nbsp;query: `
&nbsp; &nbsp; &nbsp;query HomePageQuery {
&nbsp; &nbsp; &nbsp; posts {
&nbsp; &nbsp; &nbsp; &nbsp;nodes {
&nbsp; &nbsp; &nbsp; &nbsp; slug
&nbsp; &nbsp; &nbsp; &nbsp; title
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; `,
&nbsp; })
&nbsp;})

&nbsp;const json = await res.json()

&nbsp;return {
&nbsp; props: {
&nbsp; &nbsp;posts: json.data.posts,
&nbsp; },
&nbsp;}
}</code></pre> 以下の部分が、WPGraphQL プラグインで取得したクエリですね。<pre><code>query HomePageQuery {
&nbsp;posts {
&nbsp;&nbsp;nodes {
&nbsp;&nbsp;&nbsp;slug
&nbsp;&nbsp;&nbsp;title
&nbsp;&nbsp;}
&nbsp;}
}</code></pre> <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/39750df1247a4a8099051dd58f1e80b6/queries.png" alt=""> ①でクエリを指定します。 posts &gt; nodes &gt; slug, title　欲しい情報をチェックします。 ②クエリがツリー形式で表示されます。 ③再生ボタンを押すと、④内容が表示されます。これでチェックです。 ②の部分をコピペして貼り付けたのが上のクエリですね。 それと、GraphQLでもエンドポイントを指定する必要があって、 それは、REST APIとは違い、WPGraphQLプラグインの設定画面を見ればわかります。 http://wordPressのURL/graphql　となっています。 process.env.WORDPRESS... のところですね。 .envファイルで http://wordPressのURL/graphql を指定しています。 <a href="/blog/uinm1p25wby">.envファイル</a><a href="/blog/uinm1p25wby">にて、WORDPRESS_GRAPHQL_ENDPOINTを設定、読み込んでます。</a> 次にブログ個別詳細ページです。 pages/posts/[slug].js<pre><code>import Image from 'next/image'
import Link from 'next/link'

export default function Post(data) {

&nbsp;const post = data.post;

&nbsp;return (
&nbsp; &lt;div&gt;
&nbsp; &nbsp;&lt;h1&gt;{post.title}&lt;/h1&gt;
&nbsp; &nbsp;{post.featuredImage &amp;&amp; &lt;Image src={post.featuredImage.node.sourceUrl} width={1600} height={600} /&gt;}
&nbsp; &nbsp;&lt;article dangerouslySetInnerHTML={{ __html: post.content }}&gt;&lt;/article&gt;
&nbsp; &nbsp;&lt;Link href="/"&gt;Back&lt;/Link&gt;
&nbsp; &lt;/div&gt;
&nbsp;)
}

// getStaticProps関数
export async function getStaticProps(context) {
&nbsp;const res = await fetch(process.env.WORDPRESS_GRAPHQL_ENDPOINT, {
&nbsp; method: 'POST',
&nbsp; headers: { 'Content-Type': 'application/json' },
&nbsp; body: JSON.stringify({
&nbsp; &nbsp;query: `
&nbsp; &nbsp; query SinglePost($id: ID!, $idType: PostIdType!) {
&nbsp; &nbsp; &nbsp;post(id: $id, idType: $idType) {
&nbsp; &nbsp; &nbsp; title
&nbsp; &nbsp; &nbsp; slug
&nbsp; &nbsp; &nbsp; content
&nbsp; &nbsp; &nbsp; featuredImage {
&nbsp; &nbsp; &nbsp; &nbsp;node {
&nbsp; &nbsp; &nbsp; &nbsp; sourceUrl
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; }
&nbsp; &nbsp;`,
&nbsp; &nbsp;variables: {
&nbsp; &nbsp; id: context.params.slug,
&nbsp; &nbsp; idType: 'SLUG'
&nbsp; &nbsp;}
&nbsp; })
&nbsp;})

&nbsp;const json = await res.json()

&nbsp;return {
&nbsp; props: {
&nbsp; &nbsp;post: json.data.post,
&nbsp; },
&nbsp;}
}

// getStaticPaths関数
export async function getStaticPaths() {
&nbsp;const res = await fetch(process.env.WORDPRESS_GRAPHQL_ENDPOINT, {
&nbsp; method: 'POST',
&nbsp; headers: { 'Content-Type': 'application/json' },
&nbsp; body: JSON.stringify({
&nbsp; &nbsp;query: `
&nbsp; &nbsp; query AllPostsQuery {
&nbsp; &nbsp; &nbsp;posts {
&nbsp; &nbsp; &nbsp; nodes {
&nbsp; &nbsp; &nbsp; &nbsp;slug
&nbsp; &nbsp; &nbsp; &nbsp;content
&nbsp; &nbsp; &nbsp; &nbsp;title
&nbsp; &nbsp; &nbsp; &nbsp;featuredImage {
&nbsp; &nbsp; &nbsp; &nbsp; node {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;sourceUrl
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp;}
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp;}
&nbsp; 	}
&nbsp; &nbsp;`
&nbsp; })
&nbsp;})

&nbsp;const json = await res.json()
&nbsp;const posts = json.data.posts.nodes;

&nbsp;const paths = posts.map((post) =&gt; ({
&nbsp; params: { slug: post.slug },
&nbsp;}))

&nbsp;return { paths, fallback: false }
}</code></pre>getStaticProps関数、getStaticPaths関数、 それぞれで、クエリを取得しています。

WordPressをヘッドレスCMSとして利用してNext.jsで表示（GraphQL編）

国産ヘッドレスCMSの「microCMS」を使ったほうがシンプルでやりやすいけど、 世の中、すでにWordPressだらけなので、 すでにあるWordPressを利用して、JAMstack化というのが ユーザー的にはとっかかり易いみたい。 それに、WordPressの管理画面なら慣れてるし。 WordPressってREST APIってのが標準であるそうで、 https://WordPressサイト/wp-json　とブラウザで打ち込むと、 ブログがJSONデータで表示されるんです。 それを利用して、Next.jsでブログを表示させようというもの。 今回は、「A JavaScript Client for the WordPress REST API」 略して node-wpapi ！？というライブラリをつかって、 WordPressの REST API から、ブログ表示させてみた。 <a href="https://wp-kyoto.net/create-dynamic-posts-page-by-using-nest-js-ssg-and-wp-api-2/" target="_blank" rel="noopener noreferrer">Next.jsのSSGモードでWordPressの記事一覧と詳細を表示する</a> を参照というか、使わせていただきました。 node-wpapi をインストール<pre><code>$ npm install node-wpapi</code></pre> まず、ブログ一覧ページ「index.js」から。 pages/index.js　です。<pre><code>// node-wpapiをインポート
import WP from 'wpapi'
import Link from 'next/link'

// 読み込む WordPress REST APIのエンドポイントを指定します。
// API_URLは、.envファイルに。。
const wpClient = new WP({
&nbsp; endpoint: process.env.API_URL
})
&nbsp;&nbsp;
// 出力部分
export default function Home(props) {
&nbsp; return (
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;ブログ記事一覧&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {props.posts.map(post =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li key={post.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href={`/posts/${post.slug}`}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {decodeURI(post.title.rendered)}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/li&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/ul&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; )
}

export const getStaticProps = async () =&gt; {
&nbsp; const data = await wpClient.posts().perPage(100) // perPage()で表示ページ数指定
&nbsp; return {
&nbsp; &nbsp; props: {
&nbsp; &nbsp; &nbsp; posts: data
&nbsp; &nbsp; }
&nbsp; }
}</code></pre> リンクのタイトル部分が日本語で、そのままだとエンコードされちゃってるので、 デコードしてやります。decodeURI(post.title.rendered) wpClient.posts().perPage(100) perPage(100) --&gt; 100件記事表示ということです。 こういうオプション的なことができます。 ほかにもあるので、 <a href="https://github.com/WP-API/node-wpapi#requesting-different-resources" target="_blank" rel="noopener noreferrer">Requesting Different Resources</a> から下を参照してください。 次に、各記事個別ページです。 場所は、 pages/posts/[slug].js　とします。<pre><code>// index.js とおなじく。
import WP from 'wpapi'
import Link from 'next/link'

const wpClient = new WP({
&nbsp;endpoint: process.env.API_URL
})

// 各記事（[slug].js）では、getStaticPathsとgetStaticPropsが必要です。
// getStaticPathsのほうは、URLを動的に作ってるとのこと。
export const getStaticPaths = async () =&gt; {
&nbsp;const posts = await wpClient.posts()
&nbsp;return {
&nbsp; paths: posts.map(post =&gt; ({
&nbsp; &nbsp;params: {
&nbsp; &nbsp; slug: post.slug
&nbsp; &nbsp;}
&nbsp; })),
&nbsp; fallback: false
&nbsp;}
}

// getStaticPropsのほうは、ページ内のコンテンツを動的に取得してるそうです。
export const getStaticProps = async ({ params }) =&gt; {
&nbsp;const posts = await wpClient.posts().slug(params.slug)
&nbsp;return {
&nbsp; props: {
&nbsp; &nbsp;post: posts[0]
&nbsp; }
&nbsp;}
}

// HTML出力部分です。
export default function MyPost({ post }) {
&nbsp;return (
&nbsp; &lt;div&gt;
&nbsp; &nbsp;&lt;article&gt;
&nbsp; &nbsp; &lt;h1&gt;{post.title.rendered}&lt;/h1&gt;
&nbsp; &nbsp; &lt;div dangerouslySetInnerHTML={{ __html: post.content.rendered }} /&gt;
&nbsp; &nbsp;&lt;/article&gt;
&nbsp; &nbsp;&lt;Link href="/"&gt;Back&lt;/Link&gt;
&nbsp; &lt;/div&gt;
&nbsp;)
}</code></pre>title や excerpt、そして content は、.renderedが必要です。 post.title.rendered てな具合とします。 content などリッチテキストとして入力したものは、 dangerouslySetInnerHTML={{ __html: post.content.rendered }} としてやらないと、HTMLタグのまま出力されてしまいます。 これで、最低限のブログ一覧と各記事詳細を表示できますね。 以上の方法でとりあえず出来ましたけど、 アイキャッチ画像は普通にやってもREST APIで取得出来なくて、 エンドポイントに「?_embed」とかを追加する必要があるんですが、 node-wpapi でのやり方がわからなかったので、 WordPress の function.php を弄って、APIに項目を追加して表示させたりしました。 それについては、また今度ご紹介します。

WordPressをヘッドレスCMSとして利用してNext.jsで表示（REST API編）

Next.js + microCMSでのブログにて、いろいろjavascriptのコードを載せることが多く、 そのままだと、ただの白いテキストでしか表示されないので、もう少し見やすくするために、 シンタックスハイライトというものを導入してみました。 highlight.js というのと、cheerio といのが必要みたいなので、まずはインストールします。 ※ highlight.js コードに色付けするためのJSライブラリ？ ※ cheerio 該当部分を抜き出すために使う <pre><code>$ npm i cheerio
$ npm i highlight.js</code></pre> あとは、<a href="https://qiita.com/cawauchi/items/ff6489b17800c5676908" target="_blank" rel="noopener noreferrer">こちらのサイト</a>を参照しています。 当サイトでは、個別ブログページでコードを載せているので、 blog/[id].js ページを編集してやります。 まず、冒頭にインストールした highlight.js と cheerio 、そしてハイライトのテーマ「Rainbow」をインポートします。<pre><code>import cheerio from 'cheerio'
import hljs from 'highlight.js'
import 'highlight.js/styles/rainbow.css'</code></pre> getStaticProps のところで、<pre><code>const $ = cheerio.load(data.content)

$('pre code').each((_, elm) =&gt; {
&nbsp; const result = hljs.highlightAuto($(elm).text())
&nbsp; $(elm).html(result.value)
&nbsp; $(elm).addClass('hljs')
})</code></pre>を追記。 cheerio.load(data.content)　の　data.content　が、microCMSでの投稿箇所のHTML。 その中から pre、code タグ部分を抽出してハイライトさせてるんですね。たぶん。 そして、return でデータを返します。<pre><code>return {
&nbsp; props:{
&nbsp; &nbsp; blog: data,
&nbsp; &nbsp; highlightedBody: $.html()
&nbsp; }
}</code></pre> あとは、表示部分を変更。<pre><code>export default function BlogId({blog, highlightedBody}) { // &lt;-- highlightedBody追記
&nbsp; return (
&nbsp; &nbsp; &lt;Layout title={blog.title}&gt;
&nbsp; &nbsp; // 省略
&nbsp; &nbsp; &nbsp; &lt;div dangerouslySetInnerHTML={{
&nbsp; &nbsp; &nbsp; &nbsp; __html: highlightedBody
&nbsp; &nbsp; &nbsp; }} /&gt;
&nbsp; &nbsp; // 省略
&nbsp; &nbsp; &lt;/Layout&gt;
&nbsp; );
}</code></pre> hightlightedBody を追加してます。 元々、<pre><code>&lt;div dangerouslySetInnerHTML={{
&nbsp; __html: blog.content
}} /&gt;</code></pre>のところは、<pre><code>&lt;div dangerouslySetInnerHTML={{
&nbsp; __html: highlightedBody
}} /&gt;</code></pre>に。 blog/[id].js のコード全体<pre><code>import Layout from '../../components/layout'
import cheerio from 'cheerio'
import hljs from 'highlight.js'
import 'highlight.js/styles/rainbow.css'

export default function BlogId({ blog, highlightedBody }) {
&nbsp; return (
&nbsp; &nbsp; &lt;Layout title={blog.title}&gt;
&nbsp; &nbsp; &nbsp; &lt;article&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;{blog.title}&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div dangerouslySetInnerHTML={{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; __html: highlightedBody
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &nbsp; &lt;/article&gt;
&nbsp; &nbsp; &lt;/Layout &gt;
&nbsp; );
}

// パスを指定
export const getStaticPaths = async () =&gt; {
&nbsp; const key = {
&nbsp; &nbsp; headers: { 'X-API-KEY': process.env.API_KEY },
&nbsp; }
&nbsp; const data = await fetch(
&nbsp; &nbsp; 'microCMSのURL/blog?limit=100',&nbsp;
&nbsp; &nbsp; key
&nbsp; )
&nbsp; &nbsp; .then(res =&gt; res.json())
&nbsp; &nbsp; .catch(() =&gt; null)
&nbsp; const paths = data.contents.map(content =&gt; `/blog/${content.id}`)

&nbsp; return {
&nbsp; &nbsp; paths, fallback: false,
&nbsp; }
}

// 記事データを取得
export const getStaticProps = async context =&gt; {
&nbsp; const id = context.params.id;
&nbsp; const key = {
&nbsp; &nbsp; headers: { 'X-API-KEY': process.env.API_KEY },
&nbsp; };
&nbsp; const data = await fetch(
&nbsp; &nbsp; 'microCMSのURL/blog/' + id,
&nbsp; &nbsp; key,
&nbsp; )
&nbsp; &nbsp; .then(res =&gt; res.json())
&nbsp; &nbsp; .catch(() =&gt; null)

&nbsp; const $ = cheerio.load(data.content)

&nbsp; $('pre code').each((_, elm) =&gt; {
&nbsp; &nbsp; const result = hljs.highlightAuto($(elm).text())
&nbsp; &nbsp; $(elm).html(result.value)
&nbsp; &nbsp; $(elm).addClass('hljs')
&nbsp; })

&nbsp; return {
&nbsp; &nbsp; props: {
&nbsp; &nbsp; &nbsp; blog: data,
&nbsp; &nbsp; &nbsp; highlightedBody: $.html()
&nbsp; &nbsp; }
&nbsp; }
}</code></pre> 感想：見やすくなったけど、、、たまに効いてなかったり。う〜む。 やり方間違ってるかもです。

シンタックスハイライトの導入

framer-motionをインストール<pre><code>$ npm install framer-motion</code></pre> 基本は<a href="https://ibulog.com/post/next-js-transition-animation/" target="_blank" rel="noopener noreferrer">こちらのブログ</a>を参照しています。 layout.jsで設定してあげることで、画面遷移アニメーションをお手軽にできます！ layout.js<pre><code>import { motion } from 'framer-motion'

export default function Layout(props) {
&nbsp; return (
&nbsp; &nbsp; &lt;div&gt;
&nbsp; &nbsp; &nbsp; &lt;Head&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charSet="UTF-8" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta name="viewport" content="width=device-width" /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;{props.title}&lt;/title&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta name="description" content={props.description} /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;link rel="icon" href="/favicon.ico" /&gt;
&nbsp; &nbsp; &nbsp; &lt;/Head&gt;
&nbsp; &nbsp; &nbsp; &lt;Header /&gt;
&nbsp; &nbsp; &nbsp; &lt;motion.div
&nbsp; &nbsp; &nbsp; &nbsp; initial={{ opacity: 0 }}
&nbsp; &nbsp; &nbsp; &nbsp; animate={{ opacity: 1 }}
&nbsp; &nbsp; &nbsp; &nbsp; transition={{ delay: 0.3 }}
&nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; {props.children}
&nbsp; &nbsp; &nbsp; &lt;/motion.div&gt;
&nbsp; &nbsp; &nbsp; &lt;Footer /&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; )
}</code></pre> <pre><code>&lt;motion.div&gt;〜&lt;/motion.div&gt;</code></pre>部分がアニメーション指定してる部分ということです。 initial：初期値、animate：アニメーション後、transition：速度 基本的に指定してる箇所が同時に表示・アニメーションされますが、 liタグごととか、個別にアニメーションさせたい時は、以下のようにします。<pre><code>import { motion } from'framer-motion'

const list = {
&nbsp; visible: {
&nbsp; &nbsp; opacity: 1,
&nbsp; &nbsp; transition: {
&nbsp; &nbsp; &nbsp; when: "beforeChildren",
&nbsp; &nbsp; &nbsp; staggerChildren: 0.2,
&nbsp; &nbsp; },
&nbsp; },
&nbsp; hidden: {
&nbsp; &nbsp; opacity: 0,
&nbsp; &nbsp; transition: {
&nbsp; &nbsp; &nbsp; when: "afterChildren",
&nbsp; &nbsp; },
&nbsp; },
}

const item = {
&nbsp; visible: { opacity: 1, y: 0 },
&nbsp; hidden: { opacity: 0, y: 100 },
}

export default function Blog({ blog }) {
&nbsp; return (
&nbsp; &nbsp; &lt;Layout&gt;
&nbsp; &nbsp; &nbsp; &lt;section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;最近の投稿&lt;/h1&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;motion.div
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; initial="hidden"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animate="visible"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variants={list}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {blog.map((blog) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;motion.article variants={item} key={blog.id}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href={`/blog/${blog.id}`}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;figure&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a&gt;&lt;Image src={blog.eyecatch.url} alt={blog.title} width={1600} height={600} /&gt;&lt;/a&gt; // サムネイル表示
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/figure&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Link href={`/blog/${blog.id}`}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h3&gt;&lt;a&gt;{blog.title}&lt;/a&gt;&lt;/h3&gt; // タイトル表示
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Link&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/motion.article&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/motion.div&gt;
&nbsp; &nbsp; &nbsp; &lt;/section&gt;
&nbsp; &nbsp; &lt;/Layout&gt;
&nbsp; )
}</code></pre> &lt;motion.div&gt;タグの中に、&lt;motion.article&gt;タグを設定してます。 このサイトでは、<a href="/blog">ブログ一覧表示画面</a>になります。 ほかにもいろいろできるようですよ。 参考サイト「Framer Motion」 <a href="https://www.framer.com/motion/" target="_blank" rel="noopener noreferrer">Framer Motion</a>

framer-motionを使って動きのあるページ

Next.jsにTailwind CSSを設定 参考URL <a href="https://tailwindcss.com/docs/guides/nextjs" target="_blank" rel="noopener noreferrer">Install Tailwind CSS with Next.js</a> すでにNext.jsを始めてて後から設定したい場合、 「Setting up Tailwind CSS」から始めるといいと思う。 また、特定のタグ（今回は「pre」タグ：コード表記用や articleタグ）に毎回同じスタイルを適応させたい場合に、 styles/globals.cssにて<pre><code>@tailwind base;
@tailwind components;
 pre {
 @apply whitespace-pre-wrap break-all bg-black text-white p-4;
 }
 article p a {
 @apply hover:underline text-blue-500;
 }
@tailwind utilities;</code></pre> と、してやる。 参考URL：<a href="https://tailwindcss.jp/docs/functions-and-directives" target="_blank" rel="noopener noreferrer">機能とディレクティブ</a>

Next.jsにTailwind CSSを設定

日付をフォーマットするために、「date-fns ライブラリ」を利用します！ date-fnsをインストール！<pre><code>$ npm install date-fns --save</code></pre> コンポーネントに date.js を追加します。 date.js<pre><code>import { parseISO, format } from 'date-fns'

export default function Date({ dateString }) {
&nbsp;const date = parseISO(dateString)
&nbsp;return &lt;time dateTime={dateString}&gt;{format(date, 'yyyy.MM.dd')}&lt;/time&gt;
}</code></pre> 「yyyy.MM.dd」というのが日付の書式です。ここだけ好みの書式に変更して、あとはそのままでいけます。 そして、日付をフォーマットしたいページ 当サイトですと、個別のブログ記事ページ（blog/[id].js）に追記します。 追加したコンポーネント（date.js）をインポート<pre><code>import Date from "../../components/date"</code></pre> Dateタグでフォーマットしたい日付部分を囲って<pre><code>&lt;Date dateString={blog.publishedAt} /&gt;</code></pre> これでオッケー！ <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/e08b24e94af44b688f9c772fa9ca9d39/dateformat.png" alt="">

日付をフォーマット

これまでは、components/layout.js にて、CDN経由で Font Awesome を読み込んでたんですが、 不必要なページでも常に読み込んでたためにGoogle Lighthouseスコアが悪くなってたので、 必要なページにだけ読み込む為、コンポーネントでやることに。 まず、必須なものをインストール<pre><code>$ npm install @fortawesome/react-fontawesome
$ npm install @fortawesome/fontawesome-svg-core</code></pre> 使用するアイコンは、「fa-Clock」「fa-folder-open」 <a href="https://fontawesome.com/icons?d=gallery" target="_blank" rel="noopener noreferrer">Font Awesomeサイト</a>で調べます。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/716ef452565449ae8f0d76bf52ed145c/fontawesome.png?w=1140&amp;h=960" alt="Font Awesomeサイト"> 上の「icon」をチェックし、左の「Free」「Regular」をチェック。 151個の中から探してみてください。ありましたね！ 「clock」も「fa-folder-open」も、「Regular Style」にあるので、 regularをインストールします。<pre><code>$ npm install @fortawesome/free-regular-svg-icons</code></pre> Font Awesomeアイコンを使うページにて、<pre><code>import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faClock } from "@fortawesome/free-regular-svg-icons";
import { faFolderOpen } from "@fortawesome/free-regular-svg-icons";

export default function BlogId({ blog }) {
&nbsp; return (
	// 省略
	&lt;FontAwesomeIcon className="w-4 h-6" icon={faClock} /&gt;
	&lt;FontAwesomeIcon className="w-4 h-6" icon={faFolderOpen} /&gt;
	// 省略
&nbsp; );
}</code></pre> className内の値は、Tailwinds.cssでの指定…これでアイコンサイズ設定してます。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/72f149a8f553457eba805f38168c7dbe/conglaturations.png" alt=""> やった！

Next.jsにFont Awesomeを導入

これで、外部に API_KEYなどを見せないように設定。 .env.development.local<pre><code>BASE_URL=http://localhost:3000
API_KEY=hogehogehogee-himitsudayooon
API_URL=https://hogehoge.microcms.io/api/v1</code></pre> BASE_URLは、いつもこの値。 API_KEYとAPI_URLは、microCMS管理画面で確認しておいた値。 <h2 id="had72ecd0f8">注意！</h2>.gitignore に .env.development.local が記載されてることを確認。 なければ、追記しておく。 .gitignoreとは、githubにプッシュしないファイルを設定するところ。 プッシュされちゃうと、人目にさらす危険が発生するから。 .gitignore 内。<pre><code># local env files
.env.local
.env.development.local
.env.test.local
.env.production.local</code></pre> こうなってれば、いいね。 <h2 id="hc5619de7e8">追記！！</h2>.env.development.localだけではダメでした。 実際運用する際は .env.local も作っておきましょう。 内容は、.env.development.local の内容をそのままコピーでオッケー。 あと、Vercel側で、microCMSのAPI_KEYを指定しておかないと、 デプロイの際に「mapで分配するデータが未定義だよ」エラーが出てしまいます！ ご注意ください。 「TypeError: Cannot read property 'map' of undefined」 Vercelにて、API_KEYを設定します。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/ba61dcf9aecb4977bbe919f37302288b/vercel_setting.png?w=1056&amp;h=892" alt="Vercel管理画面"> <h2 id="h57c3b6c960">またまた、追記！！</h2>もう少し基本的なことを。 .env は特になにかインストールする必要もなく、 .env.local ファイル（本番用）と、.env.development.local ファイル（開発用）を作って、<pre><code>WORDPRESS_GRAPHQL_ENDPOINT=http://hoge/blog/graphql</code></pre>などと記入してやるだけでいい。それは上でも書いてますね。 利用する際は、<pre><code>process.env.WORDPRESS_GRAPHQL_ENDPOINT</code></pre>と、指定してあげればいい。

.envファイル、.env.development.localファイルを設定

Githubでリポジトリというのを作って、 そこへデータをプッシュ！ 変更したら、 まず何を変更したかを「コミット」し、 それを「プッシュ」することで、 Githubのリポジトリにデータがアップロードされる。 <pre><code>$ git init
$ git commit -m "first commit"
$ git remote add origin { Github リポジトリ アドレス }
$ git push -u origin master</code></pre> ↑↑↑↑↑ 1行目は、初めてプッシュする際に必要なこと。.gitを作成 2行目「first commit」は初めてのコミットだよ。ということ。 3行目でリポジトリの場所を指定 4行目で masterブランチにプッシュ！ ローカルブランチ名を調べたい時、<pre><code>$ git branch</code></pre> ローカルブランチ名を main から master に変えたい時、<pre><code>$ git branch -m main master</code></pre> VScodeで、プッシュできるよ。 コミット名つけて、プッシュ！ ※ リポジトリのURL確認は、画像を参照のこと。 <img src="https://images.microcms-assets.io/assets/897919847d834de9b9fc9cbff2d2776c/f9ad50bf5a674133967e22a24963e71f/20210729.png?w=600&amp;h=271" alt="Github リポジトリーURL">

Githubにプッシュ！

日本製ヘッドレスCMS「microCMS」を使って、 ブログ投稿を始めました。 気長に、気楽に続けて行けたらと思います。 よろしくお願いいたします。