今日の Web 開(kāi)発環(huán)境では、一般データ保護(hù)規(guī)則 (GDPR) や カリフォルニア州消費(fèi)者プライバシー法などのプライバシー規(guī)制を満たすために、Cookie の同意を処理することが重要です。法 (CCPA)。 Cookie はユーザーのアクティビティの追跡、コンテンツのパーソナライズ、分析の収集によく使用されますが、多くの管轄區(qū)域ではこのデータの収集にはユーザーの同意が必要です。開(kāi)発者として、コンプライアンスを確保し、透明性のあるユーザー エクスペリエンスを作成するのは私たちの責(zé)任です。

この記事では、Next.js アプリケーションで Cookie の同意を処理する方法について説明し、Cookie 同意バナーの作成、ユーザーのアクションに基づいた Cookie の管理、プライバシー法の遵守の確保に焦點(diǎn)を當(dāng)てます。 .

Cookie の同意が重要なのはなぜですか?

1. 法的遵守: GDPR および CCPA 規(guī)制により、Web サイトはトラッキング Cookie やマーケティング Cookie などの必須ではない Cookie を収集する前に明示的な同意を取得する必要があります。
2. ユーザーの透明性: Cookie 同意バナーにより、ユーザーはどのような種類のデータが収集されているかがわかり、プライバシーを制御する権限が與えられます。
3. ユーザー エクスペリエンス: Web サイトがユーザーのプライバシーを尊重し、Cookie の設(shè)定を管理する簡(jiǎn)単な方法を提供していることを示すことで、信頼性が向上します。

Next.js アプリに Cookie 同意を?qū)g裝する手順

Next.js アプリケーションに Cookie 同意バナーを追加する手順を見(jiàn)てみましょう。

---

ステップ 1: Cookie 同意ライブラリをインストールする

Cookie の同意を手動(dòng)で処理することもできますが、ライブラリを使用するとプロセスが簡(jiǎn)単になります。 React/Next.js アプリで Cookie の同意に最もよく使用されるライブラリの 1 つは、react-cookie-consent です。次のコマンドを?qū)g行してインストールできます:

npm install react-cookie-consent
# or using Yarn
yarn add react-cookie-consent

---

ステップ 2: Cookie 同意コンポーネントを作成する

ライブラリがインストールされたら、Cookie 同意バナーを表示するコンポーネントを作成します。このバナーは、Cookie の使用についてユーザーに通知し、Cookie を受け入れるか拒否するかを選択するオプションを提供します。

components/CookieConsentBanner.js に新しいコンポーネントを作成します:

npm install react-cookie-consent
# or using Yarn
yarn add react-cookie-consent

主な特徴:

• location: バナーの位置を設(shè)定します (この場(chǎng)合は下)。
• onAccept: ユーザーが Cookie を受け入れたときに何が起こるかのロジックを追加します (たとえば、ここに特定の Cookie を設(shè)定できます)。
• onDecline: ユーザーが Cookie を拒否したときの動(dòng)作を定義します。
• enableDeclineButton: ユーザーが専用のボタンを使用して Cookie を拒否できるようにします。
• cookieName: 同意狀態(tài)が保存される Cookie の名前。

---

ステップ 3: Cookie 同意バナーをグローバル レイアウトに追加する

すべてのページに Cookie 同意バナーを表示するには、それをアプリのメイン レイアウトに統(tǒng)合します。通常、これはpages/_app.jsまたはpages/_app.tsxで実行できます。

CookieConsentBanner コンポーネントを含める方法は次のとおりです。

import React from "react";
import CookieConsent from "react-cookie-consent";
import Link from "next/link";

const CookieConsentBanner = () => {
  return (
    <CookieConsent
      location="bottom"
      buttonText="Accept All"
      declineButtonText="Decline"
      enableDeclineButton
      cookieName="yourAppCookieConsent"
      style={{ background: "#2B373B", color: "#FFF" }}
      buttonStyle={{ backgroundColor: "#4CAF50", color: "#FFF", fontSize: "14px" }}
      declineButtonStyle={{ backgroundColor: "#f44336", color: "#FFF", fontSize: "14px" }}
      expires={365}  // Number of days before the cookie expires
      onAccept={() => {
        // Add functionality when user accepts cookies
        console.log("Cookies accepted");
      }}
      onDecline={() => {
        // Add functionality when user declines cookies
        console.log("Cookies declined");
      }}
    >
      This website uses cookies to enhance your experience. By using our website, you consent to the use of cookies. 
      You can read more in our <Link href="/privacy-policy"><a>privacy policy</a></Link>.
    </CookieConsent>
  );
};

export default CookieConsentBanner;

_app.js に配置すると、Next.js アプリのすべてのページにバナーが表示され、ユーザーがどこに移動(dòng)しても同意する機(jī)會(huì)が確保されます。

---

ステップ 4: プライバシー ポリシー ページを追加する (オプション)

アプリの透明性を高めるには、ユーザーが Cookie の使用方法について詳しく知ることができる、プライバシーまたは Cookie ポリシーへのリンクを提供する必要があります。このリンクは、Cookie 同意バナー (プライバシー ポリシー) に追加されました。

基本的なプライバシー ポリシー ページ (pages/privacy-policy.js) は次のとおりです。

import CookieConsentBanner from "../components/CookieConsentBanner";
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <>
      {/* Your global layout like header/footer */}
      <Component {...pageProps} />
      {/* Add the Cookie Consent Banner */}
      <CookieConsentBanner />
    </>
  );
}

export default MyApp;

---

ステップ 5: テストとデバッグ

すべてが期待どおりに動(dòng)作することを確認(rèn)するには、次のことを行う必要があります。

• さまざまなブラウザでテスト: Cookie 同意バナーがさまざまなブラウザや畫(huà)面サイズで正しく表示されることを確認(rèn)します。
• Cookie ストレージの確認(rèn): ユーザーが Cookie を受け入れるか拒否した後、ブラウザの開(kāi)発者ツールを使用して、保存されている Cookie を検査します。
• 分析ツールを更新します (必要な場(chǎng)合): ユーザーが Cookie に同意した後にのみ、Google Analytics などの分析ツールや追跡ツールを統(tǒng)合します。 Cookie 同意バナーの onAccept ハンドラー內(nèi)にトラッキング コードを動(dòng)的に追加できます。

---

ステップ 6: Cookie の動(dòng)作をカスタマイズする

ユーザーの同意に基づいて、さまざまな種類の Cookie (分析、広告など) に特定の動(dòng)作を設(shè)定できます。ユーザーが分析 Cookie を受け入れるときにカスタム Cookie を設(shè)定する例を次に示します:

import React from 'react';

const PrivacyPolicy = () => {
  return (
    <div>
      <h1>Privacy Policy</h1>
      <p>This is where you describe how your website collects, uses, and stores data, including cookies.</p>
      {/* Add your privacy and cookie details */}
    </div>
  );
};

export default PrivacyPolicy;

このアプローチにより、さまざまな Cookie カテゴリを処理し、ユーザーが明示的に同意した後にのみアクティブ化することができます。

---

結(jié)論

Next.js アプリケーションに Cookie 同意バナーを?qū)g裝すると、ユーザーが自分の個(gè)人データを制御できるようにしながら、GDPR や CCPA などのデータ プライバシー法を確実に遵守できます。 React-Cookie-Consent ライブラリを使用するかカスタム ソリューションを使用するかに関係なく、重要なのは、Cookie の使用に関してユーザーに透明性とオプションを提供することです。

要約すると:

• react-cookie-consent などの Cookie 同意管理ツールをインストールします。
• ユーザーに通知し、Cookie の受け入れまたは拒否を許可するバナーを作成します。
• Cookie はユーザーの同意後にのみ設(shè)定されるようにしてください。
• Cookie の使用方法を説明するプライバシー ポリシーへのリンクを提供します。
• アプリをテストして、ブラウザーやデバイス全體で機(jī)能することを確認(rèn)します。

以上がNext.js アプリで Cookie の同意を処理する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。