. 쿠키는 사용자 활동 추적, 콘텐츠 개인화 또는 분석 수집에 자주 사용되지만, 이 데이터를 수집하려면 많은 관할권에서 사용자 동의가 필요합니다. 개발자로서 규정을 준수하고 투명한 사용자 환경을 조성하는 것은 우리의 책임입니다.
이 글에서는Next.js 애플리케이션에서 쿠키 동의를 처리하는 방법을 다루고, 쿠키 동의 배너 생성, 사용자 작업에 따른 쿠키 관리, 개인정보 보호법 준수에 중점을 둡니다. . 쿠키 동의가 중요한 이유는 무엇입니까?
법률 준수: GDPR 및 CCPA 규정에서는 웹사이트가 추적 또는 마케팅 쿠키와 같은 비필수 쿠키를 수집하기 전에 명시적인 동의를 얻도록 요구합니다.
라이브러리가 설치되면 쿠키 동의 배너를 표시하는 구성 요소를 생성합니다. 이 배너는 사용자에게 쿠키 사용에 대해 알리고 이를 수락하거나 거부할 수 있는 옵션을 제공합니다.
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
모든 페이지에 쿠키 동의 배너를 표시하려면 앱의 기본 레이아웃에 통합하세요. 일반적으로 이 작업은 페이지/_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 앱의 모든 페이지에 표시되므로 사용자가 어디를 탐색하든 동의할 수 있습니다.
앱을 더욱 투명하게 만들려면 사용자가 쿠키 사용 방법에 대해 자세히 알아볼 수 있는 개인정보 보호 정책 또는 쿠키 정책에 대한 링크를 제공해야 합니다. 이 링크는 쿠키 동의 배너(개인정보 보호정책)에 추가되었습니다.
기본 개인정보 보호정책 페이지는 다음과 같습니다(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;
모든 것이 예상대로 작동하는지 확인하려면 다음을 수행해야 합니다.
사용자 동의에 따라 다양한 유형의 쿠키(예: 분석, 광고)에 대해 특정 동작을 설정할 수 있습니다. 다음은 사용자가 분석 쿠키를 수락할 때 맞춤 쿠키를 설정하는 예입니다.
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 라이브러리를 사용하든 맞춤형 솔루션을 사용하든 핵심은 쿠키 사용과 관련하여 사용자에게 투명성과 옵션을 제공하는 것입니다.
요약:
위 내용은 Next.js 앱에서 쿠키 동의를 처리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!