<h2 id="hdbf98b940f">前提条件</h2><ul><li>Next.jsとmicroCMSでブログサイトを開発している</li><li>SSGに対応している<p></p></li></ul><h2 id="h30cf53aef1">プレビュー用関数の作成</h2><p>まず最初に<code>/pages/api/</code>配下にpreview.tsを用意します。 このファイルではAPIリクエスト時のdraftKeyとcontentIdを処理するコードが書かれています。 microCMSで言うところの編集画面上部の「画面プレビュー」リンク押下時の処理ですね。 ここでは受け取ったクエリパラメータ（draftKey + contentId）をセッションにセットし、対象のブログ記事ページにリダイレクトするようにします。 <code>Location: </code>以降のパスには各自ブログページに紐づくrouteを設定してください。</p><div data-filename="preview.ts"><pre><code>import type { MicroCMSQueries } from &apos;microcms-js-sdk&apos;;
import type { NextApiRequest, NextApiResponse } from &apos;next&apos;;
import { microcms } from &apos;lib/client&apos;;

type QueryType = {
  id: string;
  draftKey: string;
};

const preview = async (req: NextApiRequest, res: NextApiResponse) =&gt; {
  const query = req.query as QueryType;
  if (!query.id || !query.draftKey) {
    return res?.status(404).end();
  }
  const queries: MicroCMSQueries = {
    draftKey: query.draftKey,
  };
  const content = await microcms.get({
    endpoint: &apos;blogs&apos;,
    contentId: query.id,
    queries: queries,
  });

  if (!content) {
    return res?.status(401).json({ message: &apos;Invalid ID&apos; });
  }

  res.setPreviewData(queries);
  res.writeHead(307, {
	Location: `/blog/${content.category ? content.category[0] + &apos;/&apos; : &apos;&apos;}${content.id}`,
	  });
	  res.end(&apos;Preview mode enabled&apos;);
	};
	
	export default preview;
</code></pre></div><p></p><h2 id="h38c8766536">microCMSの設定</h2><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/8f43c3b0b3154bbc8c621298936cd42f/microcms-preview-setting.png" alt="" width="1000" height="533"></figure><p>「API設定→画面プレビュー」を開き、遷移先URLを設定します。 パスは先ほど作成したpreview.tsのルートを指定します。 そしてクエリパラメータにコンテンツIDとdraftKeyを含めます、それぞれの識別IDは編集画面に説明がありますのでそれに沿った形で。</p><h3 id="h7ca5f744a9">画面プレビュー</h3><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/5ed0ca5c450244e4a75fe8b6f24a54d5/Group%2010.png" alt="" width="1000" height="142"></figure><p>記事編集画面にて「画面プレビュー」ボタンを押下します。 ブラウザで指定したURLが表示され、該当の記事ページに遷移されれば成功です。</p><p>例）</p><p>http://localhost:3000/api/preview/?id=n6wizxle-fr&amp;draftKey=JvkJgUnYs2</p><p>↓ redirect</p><p>http://localhost:3000/blog/tech/n6wizxle-fr</p><p></p><h2 id="h3c7222fefe">動作確認</h2><p>下書き保存した変更が反映されているか確認してみましょう。 microCMSの記事を編集し、「下書き保存」を押下します。 あとは「画面プレビュー」から記事ページを表示し、内容が変更されていれば成功です！</p><p></p><p></p><h2 id="h44c64d8ca2">参考ページ</h2><div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://blog.microcms.io/nextjs-preview-mode/" data-iframely-url="//cdn.iframe.ly/api/iframe?card=small&amp;url=https%3A%2F%2Fblog.microcms.io%2Fnextjs-preview-mode&amp;key=c271a3ec77ff4aa44d5948170dd74161"></a></div></div><script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>

microCMS×Next.jsを使ったプレビューモードの実装方法を解説します。

【microCMS×Next.js】SSG対応のプレビューモードを実装する

<h2 id="hdba5a2e3b8">Warpって？</h2><p>「<a href="https://www.warp.dev/" target="_blank" rel="noopener noreferrer nofollow"><u>Warp</u></a>」とはRust言語で開発された高機能で高速なターミナルです。</p><p>開発者が「The terminal for the 21st century」と謳っているように、エンジニアの生産性を上げるため、ターミナルを一から再設計したそうです。</p><p>warpの主な特徴について、公式ページよりざっくり下記に挙げています。</p><ul><li>コマンドを<strong>ブロック単位</strong>での管理</li><li><strong>A.I Command Search</strong></li><li>豊富な<strong>コマンドパレット</strong></li><li><strong>Workflow</strong></li><li><strong>リッチなコマンド履歴の参照・検索</strong></li><li><strong>自動パーマリンクの作成</strong>（実行結果をWebで共有）</li><li><strong>Hotkey</strong></li></ul><p></p><h2 id="he4b21a21c7">インストール方法</h2><p>現在はMacOSのみ対応、今後Windows/Linux環境でも対応する予定だそうです。<br>また、使用する際にはアカウント登録が必要となります。</p><h3 id="ha55d65a7da">インストーラーを使う場合</h3><p><a href="https://app.warp.dev/referral/7DGGGV" target="_blank" rel="noopener noreferrer nofollow"><u>こちら</u></a>からdmgファイルをダウンロード。</p><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/b566b8c25e3d4d96b0a4638a6e70f4da/warp_download.png" alt="" width="807" height="451"></figure><h3 id="hcbe4d998b2">Homebrewを使う場合</h3><p>下記のコマンドをターミナルで実行</p><pre><code class="language-shell">brew install --cask warp</code></pre><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/7b319c63b6c34aa3a9ba913151e62657/%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%202022-12-14%2013.26.22.png" alt="" width="1702" height="708"></figure><blockquote><p>メモ：</p><p><code>--cask</code>オプションはhomebrewの標準オプションでGUIアプリをbrewインストールする際に使うみたい。<br>オプションになる前までは<code>brew cask</code> のようにcaskコマンドとして存在していた。<br>現在のhomebrewではアップデートでオプション不要となり、通常の<code>brew install</code>でGUIアプリのインストールが可能。</p></blockquote><p></p><p></p><h2 id="h556c3a338b">基本設定と使い方</h2><p>基本的には通常のターミナルと同じように使えます。</p><p>iTermのように画面分割もできます。（⌘ + Dで縦split、⌘ + shift + Dで横split）</p><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/66030e826f2040798b854452cbe4608a/%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%202022-12-15%2012.25.14.png" alt="" width="3024" height="1842"></figure><p>コマンドパレット（⌘ + P）は必要なショートカットを探す時に使えます。</p><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/7887508a5fbd4e04874e1ca767aec97e/%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%202022-12-16%2018.54.00.png" alt="" width="2068" height="1501"></figure><p>コマンドの入力はウィンドウの下部に固定、結果は下から上に向かって出力されていきます。<br></p><figure><img src="https://images.microcms-assets.io/assets/ed092f4fb32144088ce7689743fe3a8f/71619cc5a45348a1a99148ad73e02a1b/warp_excete_result.png" alt="" width="836" height="532"></figure><p>またマウスポインターで出力結果をブロック選択することができ、コピーや共有リンクの作成などが可能。</p><h2 id="h2e4855ede4">Warpの目的</h2><p>Warpは何を目的としているのか、今までのターミナルとどのように違うのか。</p><p><a href="https://www.warp.dev/blog/introducing-warp" target="_blank" rel="noopener noreferrer nofollow"><u>公式ページ</u></a>よりWarp CEOのZach Lloyd氏の記事の一部を簡単に要約しました。</p><blockquote><p>コードエディターとターミナルは開発者にとってどちらも欠かせないアプリケーションです。<br>しかし、過去40年間改善され続けてきたのはエディターだけであり、ターミナルに大きな変化は見られませんでした。<br>私たちは二つの大きな課題を解決します。</p><p>1．ターミナルの使いづらさ<br>2．チーム利用のための機能がない</p><p>Warpは、入力と出力を簡単にし、ほとんどの設定の必要性を無くしました。<br>よく使うツールのコマンドを提案したり、開発者の時間を節約する組み込みのワークフローを提供することで、コマンド入力を迅速かつ楽しくします。<br>また、「コラボレーション」機能によりチームメンバー間での知識の共有を容易にし、生産性をより強固なものにします。<br>DylanがFigmaで示したように。（Dylan：FigmaのCEO）</p></blockquote><p>まとめると、、、</p><p>エディターの進化は目まぐるしいのにターミナルって全然変わってなくね？</p><p>じゃあ微妙なところ改善してモダンなアプリを作ろう！</p><p>ついでにFigmaみたいにチーム開発で便利な機能もつけよう！</p><p></p><p>みたいな感じ？</p><p></p><h2 id="he3588b532b">あとがき</h2><p>今後もアップデートが期待されるWarp。</p><p>まだまだ始まったばかりのプロジェクトなので、今後のアップデートに期待しましょう。</p><p></p><p></p><h2 id="h335a87b5ef">参考サイト</h2><ul><li><a href="https://www.warp.dev/" target="_blank" rel="noopener noreferrer nofollow"><u>Warp公式サイト</u></a></li></ul>

Rust製の次世代ターミナル「Warp」のインストール方法とその特徴について解説します。

#TECH