<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんわ。<br>Watatakuです。<br>今回の書いていく内容は「Next.js における環境変数の基本的な設定方法」です。<br><br><code>env</code>&nbsp;ファイルの基本的な使い方の参考になれば幸いです！</p><h2 id="hdad28025e6">環境変数の基本的な設定方法</h2><p>バージョン 9.4 以上の Next.js から、環境変数のサポートが組み込まれています。<br><br>環境変数を設定する基本的な方法は以下の通りです。</p><ul><li>基本的には&nbsp;<code>.env.local</code>&nbsp;に環境変数を定義（詳細は後述）</li><li>設定した環境変数を呼び出すときは&nbsp;<code>process.env.環境変数名</code>&nbsp;とする</li><li>ブラウザで環境変数を使用したい場合は、先頭の文字を&nbsp;<code>NEXT_PUBLIC_</code>&nbsp;とする</li></ul><pre><code>// .env
API_KEY=abcdefghijk</code></pre><p><br></p><pre><code>// pages/index.tsx
import { GetStaticProps } from 'next';

// サーバー側で実行
export const getStaticProps: GetStaticProps = async () =&gt; {
  console.log(process.env.API_KEY);
  ...
};

// クライアント側で実行
export default function Index(): JSX.Element {
  return (
    &lt;&gt;
      {process.env.API_KEY}
    &lt;/&gt;
  );
}</code></pre><p>Next.js では&nbsp;<code>env</code>&nbsp;ファイル名に応じて、<strong>開発 / 本番環境で切り替えることができます</strong>。具体的なルールは以下の通りです。<br></p><ul><li><code>.env</code>：常に読み込み</li><li><code>.env.development</code>：開発環境</li><li><code>.env.production</code>：本番環境</li><li><code>.env.local</code>：常に読み込み</li><li><code>.env.development.local</code>：開発環境</li><li><code>.env.production.local</code>：本番環境</li></ul><p><br>基本的にシークレットな値は&nbsp;<code>.env*.local</code>&nbsp;で定義を行い、<code>.gitignore</code>&nbsp;でリポジトリから除外します。<br>一方で、<code>.env</code>&nbsp;/&nbsp;<code>.env.development</code>&nbsp;/&nbsp;<code>.env.production</code>&nbsp;は、リポジトリに含めます。<strong>URL や企業名などデフォルト値などを定義するときに使いましょう</strong>。<br></p><h2 id="h7605dc6208">参考文献</h2><p><a href="https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/environment-variables" target="_blank" rel="noopener noreferrer">https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/environment-variables</a><br><a href="https://fwywd.com/tech/next-env" target="_blank" rel="noopener noreferrer">https://fwywd.com/tech/next-env</a><br></p>

Next.jsにおける環境変数の設定方法。

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。Watatakuです。<br>今回のお話はこのサイトに「目次をつけた」ってお話です。<br><br>目次をつけたいけどどうやってつけるかわからなかったのですが<br>調べると意外と簡単につけれたのでご紹介したいと思います。<br></p><h2 id="h1eea724d7c">必要パッケージのインストール</h2><p>以下のパッケージをインストールしてください。</p><pre><code>$ npm install cheerio</code></pre><p>これは、<u>データクロール用の非常に強力なJavaScriptライブラリ</u>です。<br><br>また、今回はTypescriptを扱うのでこちらの方もインストールします。</p><pre><code>$ npm install --save @types/cheerio</code></pre><h2 id="h6957ba1257">目次を作る</h2><p>インストールしたパッケージを読み込む。</p><pre><code>import cheerio from "cheerio";</code></pre><p><br><code>getstaticProps()</code>内に以下のコードを追加してください。</p><pre><code>export const getStaticProps = async (
  context: GetStaticPropsContext&lt;{ id: string }&gt;
) =&gt; {
  const data = await fetch( ・・・ ); // ブログデータ取得
  
// ---------------------------追加----------------------------------
  const $ = cheerio.load(data.body);　// data.bodyにはブログの記事情報が入っている。

  const headings = $("h1, h2, h3, h4, h5").toArray();

  const toc = headings.map((data: any) =&gt; ({
    text: data.children[0].data,
    id: data.attribs.id,
    name: data.name,
  }));
// ---------------------------追加----------------------------------


  return {
    props: {
      toc,
    },
  };
};</code></pre><p><br>目次を表示する。</p><pre><code>&lt;ul id="lists"&gt;
  {toc.map((toc, index) =&gt; (
    &lt;li id={"list" + toc.name} key={index}&gt;
        &lt;a href={"#" + toc.id}&gt;{toc.text}&lt;/a&gt;
    &lt;/li&gt;
  ))}
&lt;/ul&gt;</code></pre><h2 id="ha214098e44">まとめ</h2><p>以上。<br>意外と簡単にできましたね。<br>もし目次の付け方がわからない人はご参考に。</p>

Next.jsで作成したこのブログに目次をつけたい

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br><br>今回の記事はこのブログにシンタックスハイライトをつけた話です。<br>では、やっていきます。<br></p><h2 id="h9404e7a89f">必要モジュールをインストールする</h2><p>まずは下記コマンドで必要なモジュールをインストールします。</p><pre><code>$ npm install highlight.js cheerio</code></pre><p><br>typescriptをお使いの方は下記も一緒に。</p><pre><code>$ npm install --save @types/highlightjs @types/cheerio</code></pre><p><br></p><h2 id="h0ff70c627e">実装する</h2><p>下記コードを<code>getStaticProps</code> に追加してください。</p><pre><code>import cheerio from "cheerio";
import hljs from "highlight.js";
import type {
  InferGetStaticPropsType,
  GetStaticPropsContext,
  NextPage,
} from "next";

type Props = InferGetStaticPropsType&lt;typeof getStaticProps&gt;;

export const getStaticProps = async (
  context: GetStaticPropsContext&lt;{ id: string }&gt;
) =&gt; {
  const data = await client.get({
    endpoint: "blog",
    contentId: context.params?.id,
  });

  const $ = cheerio.load(data.body); // data.body はブログの本文が入っていると思ってください

// ------------------------------------------ 追加 ------------------------------------------
  $("pre code").each((_, elm) =&gt; {
    const result = hljs.highlightAuto($(elm).text());
    $(elm).html(result.value);
    $(elm).addClass("hljs");
  });
// ------------------------------------------ 追加 ------------------------------------------
  return {
    props: {
      highlightedBody: $.html(),
    },
  };
};

const Detail: NextPage&lt;Props&gt; = ({ highlightedBody }) =&gt; {
    return (
        &lt;div dangerouslySetInnerHTML={{ __html: highlightedBody }} /&gt;
    )
};
export default Detail;
 </code></pre><p><br>なお、このページに、</p><pre><code>import 'highlight.js/styles/hybrid.css';</code></pre><p>を追加して、見た目を修正しています。<br>これで、このブログのようにソースコードのシンタックスハイライトが実現できました。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>技術ブログを作るにあたり、シンタックスハイライトをつけたい方のご参考に<br>なればと思います。</p><ul><li><a href="https://qiita.com/cawauchi/items/ff6489b17800c5676908" target="_blank" rel="noopener noreferrer">参考</a></li><li><a href="https://www.blogchin.net/blogs/p9f3s1x5k5yb/" target="_blank" rel="noopener noreferrer">参考２</a></li></ul><p><br></p>

ソースコードにシンタックスハイライトをつける方法

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>今回の記事はこのサイトをPWAにしたよと報告と<br>Next.jsでのPWAの仕方を書いていきます。</p><h2 id="hc4fc4a6bbf">PWAとは</h2><p><span style="color:#333333">P</span>WAはプログレッシブウェブアプリ(Progressive web apps)の略で、<br>ウェブアプリをネイティブアプリのように使えるようにする仕組みのことです。</p><h2 id="h467bf686e0">実際にやっていく</h2><p>以下のコマンドを用いて、<a href="https://www.npmjs.com/package/next-pwa" target="_blank" rel="noopener noreferrer">next-pwa</a>をインストールします。</p><pre><code>$ npm install next-pwa</code></pre><p><br>インストール後、<code>next.config.js</code>に以下を記述。</p><pre><code>const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
  },
});</code></pre><p><br>PWA実装に必要なものは</p><ul><li>アイコン</li><li>App Manifest（manifest.json）</li><li>Service Worker</li></ul><p>他にもWEBサイトのURLが<code>https</code>でないといけないなど様々な条件があります。詳しくは<a href="https://flxy.jp/article/628" target="_blank" rel="noopener noreferrer">こちら</a>。<br><br>そこで便利なのがこちらの<a href="https://ao-system.net/favicongenerator/" target="_blank" rel="noopener noreferrer">様々なファビコンを一括生成。favicon generator</a><br>こちらでアイコンとApp Manifestなどが作られるので、全て<code>publicディレクトリ</code><br> に格納してください。<br><br>格納後、manifest.jsonを編集します。<br>※下記マニフェストはこのサイトでのマニフェストです。</p><pre><code>{
  "name": "Watataku's ブログ",
  "short_name": "ブログ",
  "description": "",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#fff",
  "theme_color": "#fff",
  "icons": [
    {
      "src": "/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}</code></pre><p><br>編集後、src/pagesディレクトリに<code>_document.tsx</code>を作成し、<br>以下のように<code>Head</code>のなかでアイコン、manifest.jsonなどを読み込んでいきます。</p><pre><code>import Document, {
  Html,
  Head,
  Main,
  NextScript,
} from "next/document";

class MyDocument extends Document {
  render() {
    return (
      &lt;Html lang="ja-JP" dir="ltr"&gt;
        &lt;Head&gt;
          {/* windows */}
          &lt;meta
            name="msapplication-square70x70logo"
            content="/site-tile-70x70.png"
          /&gt;
          &lt;meta
            name="msapplication-square150x150logo"
            content="/site-tile-150x150.png"
          /&gt;
          &lt;meta
            name="msapplication-wide310x150logo"
            content="/site-tile-310x150.png"
          /&gt;
          &lt;meta
            name="msapplication-square310x310logo"
            content="/site-tile-310x310.png"
          /&gt;
          &lt;meta name="msapplication-TileColor" content="#000" /&gt;


          {/* safari */}
          &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
          &lt;meta name="apple-mobile-web-app-status-bar-style" content="#000" /&gt;
          &lt;meta name="apple-mobile-web-app-title" content="myapp" /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/apple-touch-icon-180x180.png"
          /&gt;
          {/* 一般 */}
          &lt;meta name="application-name" content="myapp" /&gt;
          &lt;meta name="theme-color" content="#000" /&gt;
          &lt;link rel="icon" sizes="192x192" href="/icon-192x192.png" /&gt;
          &lt;link rel="icon" href="/favicon.ico" /&gt;
          &lt;link rel="manifest" href="/manifest.json" /&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    );
  }
}

export default MyDocument;</code></pre><p><br></p><h2 id="h6fd83e2648">PWAの確認</h2><p>localhostで開き、デベロッパーツールを見るとServiceWorkerが登録されていることがわかります。<br>一回読み込んでしまえば、オフラインにして再読み込みしてもちゃんと読み込まれます。これでオフラインで動作する事は確認はできました！<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/0b9672f5988e442996efd52a44599be5/Watataku_s_%E3%83%95%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99-3.png" alt=""><br>また、右上に以下のダウンロードボタンも確認できます。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/0449632c209e4c12a7f703963bcccd4d/Watataku_s_%E3%83%95%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99-2.png" alt=""></p><h2 id="he88af0846d">追記(2022.01.27)</h2><p>PWAになっていない問題。<br><a href="https://qiita.com/take_3/items/fe178568498d4589453b" target="_blank" rel="noopener noreferrer">この記事</a>で解決できました。</p><h2 id="hdd6c10bcaf">追記(2023.06.11)</h2><p><code>next-pwa</code>の設定が方法が<strong>5.6</strong>から変わっていました。<br>下記のように<code>next.config.js</code>を書き換えてください。出ないとエラりますw</p><pre><code> /** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public'
})

module.exports = withPWA({
  reactStrictMode: true
});</code></pre><h2 id="ha214098e44">まとめ</h2><p>以上がNext.jsでのPWAの仕方です。<br>もし、Next.jsのPWAの仕方がわからない方へのご参考になればと思います。<br><br></p>

Next.jsでのPWAの仕方

<h2 id="h8d027c8ed3">はじめに</h2><p>Next.jsのImageコンポーネントで画像が表示されない<br>事態が起こってしまったので、調べてみた。</p><h2 id="h86672c8acc">本題</h2><ul><li>表示される例</li></ul><p>ローカルに画像ファイルを持っている場合</p><pre><code>const imagePath = "./image.png"

&lt;Image
  src={imagePath}
  width={100}
  height={80}
  alt={"画像"}
/&gt;</code></pre><ul><li>表示されない例</li></ul><p>外部サーバに画像ファイルがある場合</p><pre><code>const imagePath = "https://example.com/img/image.png"

&lt;Image
  src={imagePath}
  width={100}
  height={80}
  alt={"画像"}
/&gt;</code></pre><p><br></p><h2 id="had0b1b94af">解決方法</h2><p><code>next.config.js</code>に以下を追記。</p><pre><code>module.exports = {
  images: {
    domains: ["example.com"] // 画像ファイルがあるドメインを指定
  },
};</code></pre>

絶対パスの画像パスではImageコンポーネントは表示されない。

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuと申します。技術ブログを作りました。よろしくお願いします。<br><br>今流行りのJamstackという手法で開発しています。<br>ホスティングはVercelを使用しています。<br><br>初回の今回はこのブログのことを書いていきます。<br><a href="https://github.com/watataku8911/watataku-blog" target="_blank" rel="noopener noreferrer">ソースコード</a></p><h2 id="hed900658dc">環境</h2><ul><li>React:17.0.2</li><li>Next.js:v.12.0.7 (7/11日現在 : v.13.4.3)</li><li>typescript:v4.5.4</li></ul><h2 id="h49af616052">このブログで書いていくこと</h2><p>フロントエンドのことを中心にWeb（Jamatack）について書いていきます。</p><h2 id="hbd7b1c9fdb">このブログを作成した目的</h2><p>単純にブログを作りたかったからw<br>以上。<br><br>・・・ではなく、真面目に回答していくと上記の動機もありますが他に下記に記載の理由があります。</p><ul><li>将来の自分の為の知識の貯蔵</li><li>自分と同じ問題にぶち当たっている人に対して、解決策を紹介したい</li><li>文章力向上の為</li></ul><p><br>投稿頻度はさほど多くはないとは思いますがよろしくお願いします。<br></p>

T.W

Next.jsにおける環境変数の設定方法。

Next.jsで作成したこのブログに目次をつけたい

ソースコードにシンタックスハイライトをつける方法

Next.jsでのPWAの仕方

絶対パスの画像パスではImageコンポーネントは表示されない。

技術ブログを作ったよ。