Next.js 앱에서 쿠키 동의를 처리하는 방법-JS 튜토리얼-php.cn

Next.js 앱에서 쿠키 동의를 처리하는 방법

Barbara Streisand

풀어 주다： 2024-10-20 16:38:29

원래의

826명이 탐색했습니다.

. 쿠키는 사용자 활동 추적, 콘텐츠 개인화 또는 분석 수집에 자주 사용되지만, 이 데이터를 수집하려면 많은 관할권에서 사용자 동의가 필요합니다. 개발자로서 규정을 준수하고 투명한 사용자 환경을 조성하는 것은 우리의 책임입니다. How to Handle Cookie Consent in Any Next.js App

이 글에서는

Next.js 애플리케이션에서 쿠키 동의를 처리하는 방법을 다루고, 쿠키 동의 배너 생성, 사용자 작업에 따른 쿠키 관리, 개인정보 보호법 준수에 중점을 둡니다. . 쿠키 동의가 중요한 이유는 무엇입니까?

법률 준수: GDPR 및 CCPA 규정에서는 웹사이트가 추적 또는 마케팅 쿠키와 같은 비필수 쿠키를 수집하기 전에 명시적인 동의를 얻도록 요구합니다.

사용자 투명성

사용자 경험
Next.js 앱에서 쿠키 동의를 구현하는 단계
Next.js 애플리케이션에 쿠키 동의 배너를 추가하는 단계를 살펴보겠습니다.

쿠키 동의를 수동으로 처리할 수도 있지만 라이브러리를 사용하면 이 과정이 더 쉬워집니다. React/Next.js 앱에서 쿠키 동의를 위해 가장 일반적으로 사용되는 라이브러리 중 하나는 React-cookie-consent입니다. 다음 명령을 실행하여 설치할 수 있습니다.

2단계: 쿠키 동의 구성요소 생성

라이브러리가 설치되면 쿠키 동의 배너를 표시하는 구성 요소를 생성합니다. 이 배너는 사용자에게 쿠키 사용에 대해 알리고 이를 수락하거나 거부할 수 있는 옵션을 제공합니다.

Components/CookieConsentBanner.js에서 새 구성요소를 생성합니다.

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

로그인 후 복사

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

로그인 후 복사

주요 특징:

위치: 배너의 위치를 설정합니다(이 경우 하단).
onAccept: 사용자가 쿠키를 수락하면 어떤 일이 발생하는지에 대한 논리를 추가합니다(예를 들어 여기에서 특정 쿠키를 설정할 수 있음).
onDecline: 사용자가 쿠키를 거부할 때의 동작을 정의합니다.
enableDeclineButton: 사용자가 전용 버튼을 사용하여 쿠키를 거부할 수 있습니다.
cookieName: 동의 상태가 저장되는 쿠키의 이름입니다.

3단계: 전역 레이아웃에 쿠키 동의 배너 추가

모든 페이지에 쿠키 동의 배너를 표시하려면 앱의 기본 레이아웃에 통합하세요. 일반적으로 이 작업은 페이지/_app.js 또는 페이지/_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단계: 개인정보 보호정책 페이지 추가(선택 사항)

앱을 더욱 투명하게 만들려면 사용자가 쿠키 사용 방법에 대해 자세히 알아볼 수 있는 개인정보 보호 정책 또는 쿠키 정책에 대한 링크를 제공해야 합니다. 이 링크는 쿠키 동의 배너(개인정보 보호정책)에 추가되었습니다.

기본 개인정보 보호정책 페이지는 다음과 같습니다(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단계: 테스트 및 디버깅

모든 것이 예상대로 작동하는지 확인하려면 다음을 수행해야 합니다.

다른 브라우저에서 테스트: 쿠키 동의 배너가 다양한 브라우저와 화면 크기에서 올바르게 표시되는지 확인하세요.
쿠키 저장 확인: 사용자가 쿠키를 수락하거나 거부한 후 브라우저의 개발자 도구를 사용하여 저장된 쿠키를 검사하세요.
분석 도구 업데이트(필요한 경우): 사용자가 쿠키에 동의한 후에만 Google Analytics와 같은 분석 또는 추적 도구를 통합하세요. 쿠키 동의 배너의 onAccept 핸들러 내에서 추적 코드를 동적으로 추가할 수 있습니다.

6단계: 쿠키 동작 사용자 정의

사용자 동의에 따라 다양한 유형의 쿠키(예: 분석, 광고)에 대해 특정 동작을 설정할 수 있습니다. 다음은 사용자가 분석 쿠키를 수락할 때 맞춤 쿠키를 설정하는 예입니다.

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;

로그인 후 복사

이 접근 방식을 사용하면 다양한 쿠키 카테고리를 처리하고 사용자가 명시적으로 동의한 후에만 활성화할 수 있습니다.

결론

Next.js 애플리케이션에 쿠키 동의 배너를 구현하면 GDPR 및 CCPA와 같은 데이터 개인정보 보호법을 준수하는 동시에 사용자에게 개인 데이터에 대한 제어권을 제공할 수 있습니다. React-cookie-consent 라이브러리를 사용하든 맞춤형 솔루션을 사용하든 핵심은 쿠키 사용과 관련하여 사용자에게 투명성과 옵션을 제공하는 것입니다.

요약: