DevLabo

<h1>はじめに</h1>
<p>本記事では<a href="https://www.newt.so/docs/tutorials/nextjs-og-image-generation">こちら</a>のNewtのチュートリアルを参考にog画像の自動生成を実装します。</p>
<h2>本記事の目的と概要</h2>
<p>この記事の目的は、Next.jsのImage Generation機能を活用し、自動でOG画像を生成することで、ブログの執筆時間を大幅に短縮することです。OG画像を手動で作成する手間が省けるため、ブログの執筆に専念できる時間が増え、記事の質を向上させることができます。</p>
<h2>Next.jsのImage Generationとは？</h2>
<p>Next.jsのImage Generationは、Next.jsが提供する機能の1つで、画像を最適化し、必要に応じてサイズを調整することができます。また、動的に画像を生成することもできます。この機能は、Webアプリケーションやブログなどのサイトで、ページの読み込み速度を向上させ、ユーザー体験を向上させるために利用されます。</p>
<h1>Next.jsを使った動的OG画像の作成方法</h1>
<p>Newtのチュートリアルに沿って実装していきますので詳しい手順は公式チュートリアルを参照してください。</p>
<p>私の場合はCanvaで以下のようなテンプレートを作成しました。<br>
こちらの画像を指定して作成するように設定しました。<br>
<img src="https://storage.googleapis.com/p_63f49b1ce439114a7751575c/f7452f55-898c-4eeb-bf63-3f96df5ed7c4%2FogImageBackground.png" alt="ogImageBackground.png"></p>
<h2>ハマった点</h2>
<p>ローカル環境での動作は問題なく出来ましたがデプロイしたあと表示すると画像が表示されませんでした。</p>
<h2>原因</h2>
<p><a href="https://nextjs.org/docs/api-reference/next/image#domains">公式ページ</a>に記載がある通り、next/image の src に外部ドメインを指定するとエラーになるため正しく表示されていませんでした。。<br>
これはNext.js標準の設定で許可していない外部ドメインは弾くようになっていました。</p>
<h2>改善方法</h2>
<p>next.config.jsに以下の設定を追加します。</p>
<pre><code class="language-sh"># next.config.js
const nextConfig = {
  ...
  images: {
    disableStaticImages: true, // importした画像の型定義設定を無効にする
    domains: [
      '自身のドメイン',
    ],
  },
};
</code></pre>
<p>こちらの設定で正しく表示されました。</p>
<h1>まとめ</h1>
<p>本記事ではNext.jsのImage Generationを使って、ブログのOG画像を自動生成する方法を紹介しました。この方法を使えば、手作業で画像を作成する手間や時間を省くことができ、ブログの執筆を効率化することができます。記事を読んで、実際に手順を試してみることで、効率的なブログ執筆が可能になるでしょう。</p>


Next.jsで動的OG画像を自動生成してブログ執筆時間を大幅に減らそう

<h1>はじめに</h1>
<h2>本記事の目的と概要</h2>
<p>Reactアプリケーションの開発において、create-react-appは非常に便利なツールですが、ビルド時間の長さなどが課題となる場合があります。そこで、より高速なビルド時間を実現できるViteへの移行を試みる本記事では、create-react-appからViteへの移行手順や注意点などを解説しています。Reactアプリケーションの開発に携わる方々にとって、本記事が役立つ情報を提供することを目的としています。</p>
<h2>Viteとは</h2>
<p>Viteは、Evan Youが開発した高速で軽量なフロントエンドビルドツールです。Viteは、Webブラウザでのモジュールベースの開発を可能にするESM（ECMAScriptモジュール）の標準化に基づいています。Viteは、開発時に高速でリアルタイムに反応し、プロダクションビルドにはRollupを使用して高速で最適化されたバンドルを生成します。Viteは、React、Vue.js、Svelteなどの主要なフレームワークで使用できます。</p>
<h2>Viteに移行するメリット</h2>
<p>Viteでは、プロジェクトのビルドとサーバーの起動が分離されています。ビルドは事前に行われ、起動時にはビルドしたファイルをサーバーが即座に配信するため、サーバーの起動が非常に高速です。また、ホットリロードの機能もあるため、変更内容をリアルタイムに反映できます。このような仕組みにより、Viteを使用することで開発の効率が大幅に向上することができます。</p>
<h1>create-react-appからViteへの移行方法</h1>
<h2>環境</h2>
<p>WSL2で開発しているアプリなのでWSL2上で行います。</p>
<pre><code class="language-sh">node -v
v16.14.2
yarn -v
1.22.18
</code></pre>
<h2>Viteのインストール</h2>
<p>viteとreactのプラグインを導入します。</p>
<pre><code class="language-sh">yarn add --dev vite @vitejs/plugin-react
</code></pre>
<h2>vite.config.tsの作成</h2>
<p>プロジェクトのルートディレクトリ(package.jsonと同じところ)にvite.config.tsを作成します。</p>
<p>以下のようにします</p>
<pre><code class="language-sh">import { defineConfig } from &quot;vite&quot;;
import react from &quot;@vitejs/plugin-react&quot;;

export default defineConfig({
  server: {
    host: true,
    open: true,
  },
  resolve: {
    alias: [{ find: &quot;@&quot;, replacement: &quot;/src&quot; }],
  },
  build: {
    outDir: &quot;build&quot;,
  },
  plugins: [react()],
});
</code></pre>
<h2>package.jsonの設定変更</h2>
<p>以下のように修正します。</p>
<pre><code class="language-sh">- &quot;start&quot;: &quot;react-scripts start&quot;,
- &quot;build&quot;: &quot;react-scripts build&quot;
+ &quot;dev&quot;: &quot;vite&quot;,
+ &quot;start&quot;: &quot;vite&quot;,
+ &quot;build&quot;: &quot;vite build&quot;,
</code></pre>
<h2>index.htmlの移動</h2>
<p>create-react-appで作成した場合<code>public</code>配下にindex.htmlが存在すると思いますが、それをプロジェクトのルートに移動させます。</p>
<p>その後以下のように<code>%PUBLIC_URL%</code>で指定されている箇所を修正を行います。</p>
<pre><code class="language-html">- &lt;link rel=&quot;icon&quot; href=&quot;%PUBLIC_URL%/favicon.ico&quot; /&gt;
+ &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
- &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;%PUBLIC_URL%/logo192.png&quot; /&gt;
+ &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/logo192.png&quot; /&gt;
- &lt;link rel=&quot;manifest&quot; href=&quot;%PUBLIC_URL%/manifest.json&quot; /&gt;
+ &lt;link rel=&quot;manifest&quot; href=&quot;/manifest.json&quot; /&gt;
</code></pre>
<p>最後にbodyタグの中に<code>index.tsx</code>の記述を追加します。</p>
<pre><code class="language-html">&lt;body&gt;
  &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
+    &lt;script type=&quot;module&quot; src=&quot;/src/index.tsx&quot;&gt;&lt;/script&gt;
&lt;/body
</code></pre>
<h2>モジュールのインポートパスの修正</h2>
<p>起動するとこんな感じで怒られました。</p>
<pre><code class="language-ts">Error: The following dependencies are imported but could not be resolved:
</code></pre>
<p>そのためApp.tsxを以下のように修正</p>
<pre><code class="language-ts">- import { ExceljsDownload } from &quot;feature/exceljs&quot;;
+ import { ExceljsDownload } from &quot;@/feature/exceljs&quot;;
</code></pre>
<h2>起動</h2>
<pre><code class="language-sh">yarn dev
</code></pre>
<p>こんな感じに無事に起動できればOK</p>
<pre><code class="language-sh">yarn run v1.22.18
$ vite

  VITE v4.2.1  ready in 652 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://自分のIP:5173/
  ➜  press h to show help
</code></pre>
<h1>まとめ</h1>
<ul>
<li>Viteは高速で軽量なビルドツールであり、サーバーの起動も瞬時に行えるため、開発効率が向上します。</li>
<li>create-react-appからの移行も、Viteが提供するCLIコマンドを使うことで、非常に簡単に実現できます。<br>
ただし、Viteはまだ新しいツールであるため、全てのプラグインやライブラリに対応しているわけではありません。移行時には注意が必要です。</li>
<li>今後ますます注目が高まることが予想されるViteについて、ぜひ手軽に使ってみてください！</li>
</ul>


超簡単！create-react-appからViteへ移行する方法

<h1>はじめに</h1>
<h2>本記事の目的と概要</h2>
<p>本記事では、Next.jsとNewtを使ってJAMSTACKブログを構築する方法を解説し、Azure DevOpsを使用したデプロイ方法についても紹介します。読者は、これらの技術を使って自分のブログを構築することができるようになることを目的としています。</p>
<h2>JAMSTACKとは何か</h2>
<p>JAMSTACKとは、Webサイトやアプリケーションを構築する際の一つのアーキテクチャで以下の3つの技術要素によって構成されます。</p>
<ul>
<li>JavaScript</li>
<li>API</li>
<li>マークアップ（HTML/CSS）</li>
</ul>
<h2>本記事で取り扱う技術とツール</h2>
<p>本記事では、JAMSTACKを利用してブログを構築するために選定した技術やツールになります。<br>
これらの技術やツールを組み合わせることで、高速かつ安定したブログの構築や運用を実現することができます。</p>
<h3>Next.js</h3>
<p>Reactベースのフレームワークで、SSG（Static Site Generation）やSSR（Server Side Rendering）などをサポートしています。</p>
<h3>Newt</h3>
<p>ヘッドレスCMS（コンテンツ管理システム）で、ブログ記事の作成や管理に利用します。</p>
<h3>Azure DevOps</h3>
<p>Microsoftが提供するDevOps（開発と運用を統合するプロセス）プラットフォームで、ブログのCI/CD（継続的インテグレーション/デリバリー）に利用します。</p>
<h3>Azure Static Web Apps</h3>
<p>静的 Web サイトや Web アプリケーションのホスティングと、バックエンドの機能として Azure Functions の使用を提供する Azure のサービスです。このサービスを使用すると、静的 Web サイトや Web アプリケーションを簡単かつ迅速に構築、デプロイ、およびスケールすることができます。Azure Static Web Apps では、GitHub、Bitbucket、および Azure DevOps をサポートしています。</p>
<h3>GitHub</h3>
<p>Gitリポジトリホスティングサービスで、コードのバージョン管理や共同開発に利用します。<br>
Visual Studio Code：Microsoftが提供するオープンソースの統合開発環境で、コードエディタとして利用します。</p>
<h2>構成</h2>
<p>今回は以下の構成で作成しています。<br>
<img src="https://storage.googleapis.com/p_63f49b1ce439114a7751575c/102e84cf-bd7a-4faf-b3c0-a5415dd609e5%2Fjamstack.png" alt="jamstack.png"></p>
<h2>まとめ</h2>
<ul>
<li>JAMSTACKは、高速かつセキュアな静的ウェブサイトを構築するためのモダンな開発手法です。</li>
<li>Next.jsとNewtを使用すると、JAMSTACKアプリケーションの構築を簡単に行うことができます。</li>
<li>Azure Static Web Appsを使うことで、開発者は静的WebサイトやWebアプリケーションを簡単にデプロイし、スケーリングすることができます。</li>
<li>Azure DevOpsを使用することで、CI/CDパイプラインを構築し、自動的にアプリケーションをビルド、テスト、デプロイすることができます。</li>
<li>JAMSTACKの使用は、より高速で、よりセキュアで、より安価なWeb開発を可能にすることができます。</li>
</ul>


Next.jsで動的OG画像を自動生成してブログ執筆時間を大幅に減らそう

超簡単！create-react-appからViteへ移行する方法

Next.jsとNewtでJAMSTACKブログを構築！AzueDevOpsも解説