<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における環境変数の設定方法。

<p>実務で作る機会があったので今回書いてみようと思い書いています。誰かの参考になれば幸いです。</p><h2 id="h4e42bd2021">星のレーティング評価とは</h2><p>聞き馴染みがそんなにないとは思いますが (少なくとも筆者は初耳)レビューなどで星で評価するやつです。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/5333feb7cbec4aaab806f7bb71884dfc/%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%202024-04-13%2016.21.46.png" alt=""></p><h2 id="hed900658dc">環境</h2><ul><li>next.js : 14.1.4</li><li>react : ^18</li><li>TypeScript : ^5</li><li>TailwindCSS : ^3.3.0</li></ul><h2 id="ha31bd80de1">要件</h2><p>1~5までの数字(小数点含む)をコンポーネントに渡すと、星のレーティング評価を返すものを作る</p><h3 id="h78fd6f2c2c">第一段階・星の配列を表示する</h3><pre><code>const StarRating = () =&gt; {
  const stars = Array.from({ length: 5 }, (_, index) =&gt; {

    // 星のスタイルと描画内容を定義します。
    const starContent = "★";
    let starClassName = "text-gray-400"; 

    // 星を表示します。
    return (
      &lt;span key={index} className={`text-xl ${starClassName}`}&gt;
        {starContent}
      &lt;/span&gt;
    );
  });

  // 星を表示します。
  return &lt;div className="flex"&gt;{stars}&lt;/div&gt;;
};</code></pre><h3 id="he8bc0ed745">第二段階・評価を受け取る</h3><pre><code>import React from "react";

type StarRatingProps = {
  rating: number;
};

const StarRating: React.FC&lt;StarRatingProps&gt; = ({ rating }) =&gt; {
  const stars = Array.from({ length: 5 }, (_, index) =&gt; {
    const starContent = "★";
    let starClassName = "text-gray-400";

    return (
      &lt;span key={index} className={`text-xl ${starClassName}`}&gt;
        {starContent}
      &lt;/span&gt;
    );
  });

  return &lt;div className="flex"&gt;{stars}&lt;/div&gt;;
};

export default StarRating;</code></pre><p>Reactが少しわかる方ならわかるかもしれませんが1~5の評価をプロップスで受け取れるようにしただけです。</p><h3 id="h0e1e7d3646">第三段階・評価の数字分黄色に塗りつぶす</h3><p>ここが少し難しいところではありますがやっていきましょう。<br>まずは、「<strong>評価に基づく塗りつぶしの割合を計算</strong>」します。</p><pre><code> const fillRatio = Math.min(Math.max(rating - index, 0), 1);</code></pre><p>割合が分かったら、下記コードのように星が完全に塗りつぶされている星と一部しか塗りつぶされていない場合の場合分けを行っていきます。</p><pre><code>// 星が完全に塗りつぶされている場合
if (fillRatio === 1) {
  starClassName = "text-yellow-500"; 
}
// 星が半分または一部塗りつぶされている場合
else if (fillRatio &gt; 0) {
  return (
    &lt;span key={index} className="relative text-xl"&gt;
      {/* 塗りつぶされた部分 */}
      &lt;span
        className="absolute text-yellow-500"
        style={{
        width: `${fillRatio * 100}%`, // 塗りつぶしの割合
          overflow: "hidden",
        }}
      &gt;
        ★
      &lt;/span&gt;
      {/* 塗りつぶされていない星 */}
      &lt;span className="text-gray-400"&gt;★&lt;/span&gt;
    &lt;/span&gt;
  );
}</code></pre><p>これで完成となります。<br><br>最後にコードの全体をご覧ください。</p><pre><code>// StarRanking.tsx
import React from "react";

type StarRatingProps = {
  rating: number;
};

const StarRating: React.FC&lt;StarRatingProps&gt; = ({ rating }) =&gt; {
  const stars = Array.from({ length: 5 }, (_, index) =&gt; {
    const starContent = "★";
    let starClassName = "text-gray-400"; 
    
    const fillRatio = Math.min(Math.max(rating - index, 0), 1);

    if (fillRatio === 1) {
      starClassName = "text-yellow-500"; 
    }
    else if (fillRatio &gt; 0) {
      return (
        &lt;span key={index} className="relative text-xl"&gt;
          &lt;span
            className="absolute text-yellow-500"
            style={{
              width: `${fillRatio * 100}%`, 
              overflow: "hidden",
            }}
          &gt;
            ★
          &lt;/span&gt;
          &lt;span className="text-gray-400"&gt;★&lt;/span&gt;
        &lt;/span&gt;
      );
    }

    return (
      &lt;span key={index} className={`text-xl ${starClassName}`}&gt;
        {starContent}
      &lt;/span&gt;
    );
  });

  return &lt;div className="flex"&gt;{stars}&lt;/div&gt;;
};

export default StarRating;</code></pre><p>あとは、このコンポーネントを親で呼んであげます</p><pre><code>&lt;StarRanking ranking={4} /&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/b07bf88201ff49938c7d0f32962fa31c/%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%202024-04-13%2017.14.33.png" alt=""><br>次にこのコンポーネントに「2.5」を渡すと下記のような表示になります。</p><pre><code>&lt;StarRanking ranking={2.5} /&gt;</code></pre><p><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/8d7e158834dc44c796961ef9d983c0ac/%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%202024-04-13%2017.20.05.png" alt=""><br>うん。いい感じだと思います。<br>お疲れ様でした。<br><br><br><br><br></p>

Next.jsで星のレーティング評価を作ってみた

<p>今回はNext.jsでvcfファイルをダウンロードするボタンを作ってみたので、是非参考にしてみてください。</p><h2 id="hed900658dc">環境</h2><ul><li>next: 14.0.4</li><li>react: ^18</li><li>typescript: ^5</li></ul><h2 id="hacdb522e87">vcfファイルとは</h2><blockquote>連絡先とその関連情報を保存する仮想連絡先ファイルです。 VCF ファイルは vCard ファイルとしても知られ、電話番号、住所、連絡先の写真、Web サイトのアドレス、電子メール ID などの連絡先情報を保存するための設計されたフィールドで構成されます。</blockquote><p><a href="https://www.msoutlooktools.com/jp/open-vcf-file-on-computer/" target="_blank" rel="noopener noreferrer">https://www.msoutlooktools.com/jp/open-vcf-file-on-computer/</a></p><h2 id="h51049a6b64">モジュールをインストールする</h2><p><a href="https://www.npmjs.com/package/vcards-js" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/vcards-js</a></p><pre><code>$ npm i vcards-js</code></pre><h2 id="h1fe54e2a6d">vcfファイルをダウンロードさせるボタンの作成</h2><p>まずは普通のボタンを作ります。</p><pre><code>const VcfDownloadBtn = () =&gt; {
  return (
    &lt;button type="button"&gt;ダウンロード&lt;/button&gt;
  )
}</code></pre><p>ここにダウンロードボタンを押したら、vcfファイルをダウンロードをさせる処理を書いていきます。</p><pre><code>const VcfDownloadBtn = () =&gt; {
  const CreateVCard = (
    firstName = "",
    lastName = "",
    organization = "",
    postalCode = "",
    street = "",
    homePhone = "",
    homeFax = "",
    email?: string,
    url = "",
    note = ""
  ): string =&gt; {
    const vCardsJS = require("vcards-js");
    const vCard = vCardsJS();

    vCard.firstName = firstName;
    vCard.lastName = lastName;
    vCard.organization = organization;
    vCard.homeAddress.postalCode = postalCode;
    vCard.homeAddress.street = street;
    vCard.homePhone = homePhone;
    vCard.homeFax = homeFax;
    vCard.email = email;
    vCard.url = url;
    vCard.note = note;

    return vCard.getFormattedString();
  };

  const handleClick = (vcfText: string) =&gt; {
    const element = document.createElement("a");
    const file = new Blob([vcfText], { type: "text/vcard;charset=utf-8" });
    element.href = URL.createObjectURL(file);
    element.download = "myFile.vcf";
    document.body.appendChild(element);
    element.click();
  };
  return (
    &lt;button 
      type="button"
      onClick={() =&gt;
            handleClick(
              CreateVCard(
                "山田",
                "太郎",
                "WEBエンジニア",
                "999-9999",
                "バーリント西区公園通り128",
                "99-9999-9999",
                "00-0000-0000",
                "hoge@xxx.xx",
                "https://xxxxx.xxxxxx",
                "架空の人物です。"
              )
            )
          }
     &gt;ダウンロード&lt;/button&gt;
  )
}</code></pre><p>以上で完成なのですがこのままだと下記エラーが出ます。</p><pre><code>Module not found: Can't resolve 'fs'</code></pre><p>対処法として、<code>next.config.js</code>に以下を追加してください。</p><pre><code>webpack: (config) =&gt; {
  config.resolve.fallback = { fs: false };
  return config;
},</code></pre><p>これでエラーが無くなり、無事vcfファイルがダウンロードされると思います。<br><br>詳しくはドキュメントをチェックしてください。<br><a href="https://github.com/enesser/vCards-JS" target="_blank" rel="noopener noreferrer">https://github.com/enesser/vCards-JS</a><br><br><br><br><br></p>

Next.jsでvcfファイルダウンロードボタンを作ってみた。(Safari対応)

<h2 id="h2295b759c0">対象者</h2><ul><li>Next.jsで構築したサイトにGoogleアナリティクスを導入したい方。</li><li>または、その方法がわからない方。</li></ul><h2 id="h23ef74d045">書かないこと</h2><p>トラッキングID・gtagの取得の仕方(取得した前提で話を進めます。)</p><h2 id="hed900658dc">環境</h2><ul><li>next: 14.0.4</li><li>react: ^18</li><li>typescript: ^5</li></ul><h2 id="hadcb3d82a0">導入していく</h2><ul><li>トラッキングID・gtagを環境変数で持っておく</li></ul><pre><code>// .env.local
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="G-****************************"</code></pre><ul><li>ibs/gtag.tsを作成する</li></ul><pre><code>export const GA_TAG_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID || "";

export const IS_GATAG = GA_TAG_ID !== "";

export const pageview = (path: string) =&gt; {
  window.gtag("config", GA_TAG_ID, {
    page_path: path,
  });
};</code></pre><p><br></p><pre><code>window.gtag("config", GA_TAG_ID, {
  page_path: path,
});</code></pre><p>上記の箇所に目見線が出ていると思うので下記コマンドで型をインストールします。</p><pre><code>$ npm i -D @types/gtag.js</code></pre><ul><li>GoogleAnalyticsコンポーネントの作成</li></ul><pre><code>// components/GoogleAnalytics.tsx 
"use client";

import { usePathname, useSearchParams } from "next/navigation";
import Script from "next/script";
import { useEffect } from "react";
import { IS_GATAG, GA_TAG_ID, pageview } from "@/libs/gtag";

const GoogleAnalytics = () =&gt; {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() =&gt; {
    if (!IS_GATAG) {
      return;
    }
    const url = pathname + searchParams.toString();
    pageview(url);
  }, [pathname, searchParams]);

  return (
    &lt;&gt;
      &lt;Script
        strategy="lazyOnload"
        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TAG_ID}`}
      /&gt;
      &lt;Script id="gtag-init" strategy="afterInteractive"&gt;
        {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '${GA_TAG_ID}', {
            page_path: window.location.pathname,
          });
        `}
      &lt;/Script&gt;
    &lt;/&gt;
  );
};

export default GoogleAnalytics;</code></pre><ul><li>layout.tsxでGoogleAnalyticsコンポーネントを読み込む</li></ul><pre><code>// layout.tsx

import { Inter } from "next/font/google";
import "./globals.css";
import GoogleAnalytics from "@/components/GoogleAnalytics";
import { Suspense } from "react";
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    &lt;html lang="ja" className="scroll-smooth"&gt;
      &lt;head&gt;
        &lt;Suspense fallback={null}&gt;
          &lt;GoogleAnalytics /&gt;
        &lt;/Suspense&gt;
      &lt;/head&gt;
      &lt;body className={inter.className}&gt;
        {children}
      &lt;/body&gt;
    &lt;/html&gt;
  );
}</code></pre><p>ここで少し注意が必要なんですけど、Next.jsでApp Routerを使用するときに<code>useSearchParams()</code>を使用すると、<code>Entire page deopted into client-side rendering</code>というエラーが出てしまいます。 <br><a href="https://nextjs.org/docs/messages/deopted-into-client-rendering" target="_blank" rel="noopener noreferrer">https://nextjs.org/docs/messages/deopted-into-client-rendering</a><br><br>その対処方法として、<code>useSearchParams()</code>を使用しているコンポーネント(今回の場合、GoogleAnalytics.tsx)に<code>&lt;Suspence /&gt;</code>でラップしてやるとエラーが無くなります。<br><br>以上でGoogleアナリティクスを導入できました。</p>

Next.js(App Router)×TypescriptでGoogleアナリティクスを導入する

<html><head></head><body><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 class="hljs"><span class="hljs-regexp">//</span> .env
API_KEY=abcdefghijk</code></pre><p><br></p><pre><code class="hljs"><span class="hljs-comment">// pages/index.tsx</span>
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">GetStaticProps</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'next'</span>;

<span class="hljs-comment">// サーバー側で実行</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> <span class="hljs-attr">getStaticProps</span>: <span class="hljs-title class_">GetStaticProps</span> = <span class="hljs-keyword">async</span> () =&gt; {
  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(process.<span class="hljs-property">env</span>.<span class="hljs-property">API_KEY</span>);
  ...
};

<span class="hljs-comment">// クライアント側で実行</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">Index</span>(<span class="hljs-params"></span>): <span class="hljs-variable constant_">JSX</span>.<span class="hljs-property">Element</span> {
  <span class="hljs-keyword">return</span> (
    <span class="language-xml"><span class="hljs-tag">&lt;&gt;</span>
      {process.env.API_KEY}
    <span class="hljs-tag">&lt;/&gt;</span></span>
  );
}</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></body></html>