如何在任何 Next.js 應用程式中處理 Cookie 同意-js教程-PHP中文網

How to Handle Cookie Consent in Any Next.js App

在當今的Web 開發環境中，處理cookie 同意對於滿足隱私法規至關重要，例如通用資料保護規範(GDPR) 和加州消費者隱私法規法案(CCPA)。 Cookie 通常用於追蹤使用者活動、個人化內容或收集分析，但在許多司法管轄區收集這些資料需要使用者同意。作為開發者，我們有責任確保合規性並創造透明的使用者體驗。

在本文中，我們將介紹如何在任何 Next.js 應用程式中處理 cookie 同意，重點是建立 cookie 同意橫幅、根據使用者操作管理 cookie 以及確保遵守隱私權法.

為什麼 Cookie 同意很重要？

法律合規性：GDPR 和 CCPA 法規要求網站在收集非必要 Cookie（例如追蹤或行銷 Cookie）之前獲得明確同意。
使用者透明度：Cookie 同意橫幅讓使用者知道正在收集哪種類型的數據，並賦予他們控制隱私的權力。
使用者體驗：它透過表明您的網站尊重使用者隱私並提供管理 Cookie 首選項的簡單方法來提高信任度。

在 Next.js 應用程式中實現 Cookie 同意的步驟

讓我們完成在您的 Next.js 應用程式中新增 cookie 同意橫幅的步驟。

第1步：安裝Cookie同意庫

雖然您可以手動處理 cookie 同意，但使用函式庫可以讓流程更容易。 React/Next.js 應用程式中最常用的 cookie 同意程式庫之一是react-cookie-consent。您可以透過執行以下命令來安裝它：

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

登入後複製

步驟 2：建立 Cookie 同意元件

安裝庫後，我們將建立一個顯示 cookie 同意橫幅的元件。此橫幅將告知使用者有關 cookie 的使用，並提供接受或拒絕它們的選項。

在 Components/CookieConsentBanner.js 中建立一個新元件：

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

登入後複製

主要特點：

位置：設定橫幅的位置（在本例中為底部）。
onAccept：新增使用者接受 cookie 時發生的情況的邏輯（例如，您可以在此處設定某些 cookie）。
onDecline：定義使用者拒絕 cookie 時的行為。
enableDeclineButton：允許使用者使用專用按鈕拒絕 cookie。
cookieName：儲存同意狀態的 cookie 的名稱。

步驟 3：將 Cookie 同意橫幅新增至全域佈局

要在所有頁面上顯示 cookie 同意橫幅，請將其整合到應用程式的主佈局中。通常，這可以在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 應用程式的每個頁面上，確保無論使用者導航到何處，他們都有機會表示同意。

步驟 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;

登入後複製

第五步：測試和調試

為了確保一切能如預期運作，您應該：

在不同瀏覽器上進行測試：確保 cookie 同意橫幅在各種瀏覽器和螢幕尺寸上正確顯示。
檢查Cookie儲存：使用者接受或拒絕cookie後，使用瀏覽器的開發者工具檢查儲存的cookie。
更新分析工具（如果需要）：僅在使用者同意 cookie 後才整合 Google Analytics 等分析或追蹤工具。您可以在 cookie 同意橫幅的 onAccept 處理程序中動態新增追蹤程式碼。

第 6 步：自訂 Cookie 行為

您可以根據使用者同意為不同類型的 Cookie（例如分析、廣告）設定特定行為。以下是當使用者接受分析 cookie 時設定自訂 cookie 的範例：

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 類別，並僅在使用者明確同意後才啟動它們。