Next.js کوکی ها در

کوکی ها مکانی برای داده ها هستند که مرورگرهای ما ناآگاهانه حاوی آنها هستند. در حالی که برخی از آنها تجاوزگر سرسخت حریم خصوصی هستند، برخی دیگر با پیگیری عادات مرور، ترجیحات و موارد دیگر سعی در بهبود تجربه کاربری دارند. کوکی‌ها در موقعیت‌هایی مانند احراز هویت، بهبود UX، زمان پاسخ‌دهی سریع‌تر مفید هستند و این فهرست ادامه دارد.

در این مقاله، دو پکیج  را بررسی می‌کنیم که به ما امکان می‌دهند کوکی‌ها را در یک برنامه Next.js تنظیم کنیم و آنها را در یک مورد استفاده واقعی پیاده‌سازی کنیم.

کوکی ها: خوب هستند یا نه؟

کوکی ها فایل های متنی کوچکی هستند که وب سایت ها روی رایانه های کاربران قرار می دهند. کوکی‌ها هم مزایا و هم معایبی دارند. کوکی‌ها می‌توانند تنظیمات و اولویت‌های کاربر را به خاطر بسپارند، که می‌تواند جلسه شما و شخصی‌سازی گشت و گذار را برای کاربران بهبود بخشد. با این حال، توانایی کوکی ها برای ردیابی رفتار آنلاین کاربران، مشکلات حریم خصوصی را نشان می دهد. در نتیجه، چندین وب‌سایت استانداردهایی دارند که از آنها می‌خواهد استفاده از کوکی های خود را نشان دهند و به کاربران امکان انصراف را ارائه دهند.

علاوه بر این، چند مرورگر به کاربران این امکان را می دهند که کوکی ها را حذف کنند، که ممکن است به محافظت از حریم خصوصی آنها کمک کند. کوکی‌ها می‌توانند برای کاربران و وب‌سایت‌ها مفید باشند، اما رعایت قوانین و آگاهی از خطرات حریم خصوصی مهم است. کاربران محتاط تر می شوند و برای کمک به ردیابی کوکی ها و غیرفعال کردن تبلیغات به مرورگرهای مختلف روی می آورند. این در نهایت به کاربران و مدیران وب سایت بستگی دارد که از کوکی ها عاقلانه استفاده کنند زیرا می توانند مفید و مضر باشند.

کار با react-cookies در Next.js

اولین پکیج  که ما بررسی خواهیم کرد react-cookies است. هدف این پکیج  کمک به بارگیری و ذخیره کوکی ها در برنامه React است. بیایید یک برنامه ساده ایجاد کنیم که کاربران ثبت نام شده را ردیابی کند.

اگر قبلاً این کار را نکرده‌اید، یک برنامه Next.js را به صورت زیر راه‌اندازی کنید:

npx create-next-app --ts

پس از انجام این کار، react-cookie را با کد زیر نصب کنید:

npm install react-cookie

برای شروع استفاده از Hooks، کامپوننت CookiesProvider را در فایل app.tsx_ اضافه کنید، مانند:

import type { AppProps } from 'next/app';
import { CookiesProvider } from 'react-cookie';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <CookiesProvider>
      <Component {...pageProps} />
    </CookiesProvider>
  );
}

export default MyApp;

با انجام این کار، Hook ها اکنون از هر بخشی از برنامه شما در دسترس هستند. استفاده از آن را با وارد کردن useCookies Hook، همانطور که در زیر نشان داده شده است، شروع کنید:

import { useCookies } from 'react-cookie';

اکنون می توانیم کوکی ها را از برنامه fetch ، اضافه و حذف کنیم. بیایید با افزودن یک هوک useEffect برای fetch همه کوکی‌ها در بارگذاری شروع کنیم:

import { useCookies } from 'react-cookie';

const [cookies, setCookie, removeCookie] = useCookies(['user']);
const Home: NextPage = () => {
  useEffect(() => {
    console.log('Cookies: ', cookies);
  }, [cookies]);

  return (
  <div>...</div>
)}

در حال حاضر، شما نباید هیچ کوکی را ببینید. بنابراین، بیایید یک تابع برای تنظیم کوکی ها با استفاده از تابع ()setCookie ایجاد کنیم:

import { useRouter } from 'next/router'

//...inside the defualt function
const router = useRouter();

const setCookieHandler = () => {
  setCookie('new-user', true, {
    path: '/',
  });

  router.replace("/");
};

تابع ()setCookie  دارای سه آرگومان است: کلید (key) ، کلید-مقدار، و برخی از گزینه های پیکربندی. این انتخاب ها عبارتند از، MaxAge، Path، Domain، Expires و غیره. در این مورد از گزینه path استفاده شده تا برنامه از هر مکانی به کوکی دسترسی داشته باشد.

همانطور که می بینید، ما همچنین از userRouter() Hook برای بارگذاری مجدد صفحه خود با استفاده از متد ()place استفاده کردیم تا از افزودن یک URL به پشته تاریخچه جلوگیری کنیم. به نظر می رسد که صفحه دوباره رندر شده است!

همانطور که به جلو می رویم، به یاد داشته باشید که این آموزش فقط بر روی نمایش قابلیت های پکیج  های خاص متمرکز است. بنابراین، فرض می کنیم که مفاهیمی مانند جریان احراز هویت را درک می کنید.

اتصال یک تابع به یک Button

در مرحله بعد، اجازه دهید این تابع را به یک دکمه متصل کنیم. کد زیر را وارد کنید:

{!cookies['user'] && (
  <button onClick={setCookieHandler} className={styles.button}>
    Complete new user registration!
  </button>
)}

در این حالت، دکمه تنها در صورت وجود کوکی ارائه می شود. پیش بروید و سرور توسعه را اجرا کنید تا این را در عمل ببینید. می‌توانید این کوکی را با استفاده از ابزارهای توسعه‌دهنده با فعال کردن Control+Shift+J و سپس انتخاب بخش Application مشاهده کنید.

پس از انجام این کار، بیایید کوکی را حذف کنیم تا کاربر بتواند از سیستم خارج شود. ابتدا یک تابع دیگر بنویسید:

const removeCookieHandler = () => {
  removeCookie('new-user');

  router.replace("/");
};

اکنون، آن را به دکمه دیگری متصل کنید که تنها در صورت موجود بودن کوکی، رندر می‌شود. در صورت ثبت نام کاربر، کوکی در دسترس خواهد بود:

{cookies['new-user'] && (
  <button onClick={removeCookieHandler} className={styles.resetbutton}>
    Reset new user registration
  </button>
)}

پس از انجام این کار، اجازه دهید پکیج  دوم، کوکی‌ها را بررسی کنیم.

استفاده از پکیج  cookies-next در Next.js

با حرکت رو به جلو، نحوه استفاده از پکیج  کوکی‌های بعدی را بررسی خواهیم کرد. این پکیج  بیشتر با اکوسیستم Next.js تناسب دارد زیرا می توان از آن در هر جایی از سمت کلاینت، در سمت سرور از طریق getServerSideProps و حتی با مسیرهای API Next.js استفاده کرد.

واقعیت شگفت‌انگیز دیگر در مورد این پکیج (این مورد برای همه توسعه‌دهندگان باندل هراس است) این است که اندازه آن تقریباً نصف کوکی‌های واکنشی است. در اصل، استفاده از آن در پروژه بعدی خود را مطلوب تر می کند!

طبق سنت، اجازه دهید با نصب کوکی‌ها با دستور زیر شروع کنیم:

npm install cookies-next 

پکیج  کوکی‌های بعدی با عملکردهای مشابه پکیج  کوکی‌های واکنش داخلی همراه است. از این توابع می توان برای تنظیم و حذف کوکی ها استفاده کرد. بیایید توابع کنترل کننده برای تنظیم و حذف کوکی ها با کد زیر ایجاد کنیم:

// adding cookies
const addCookie = () => {
  setCookie('user', true, {
    path: '/',
  });
  router.replace('/');
};

// removing cookies
const removeCookie = () => {
  deleteCookie('user', {
    path: '/',
  });
  router.replace('/');
};

با انجام این کار، می‌توانید آن را با اتصال به دکمه‌های مختلف که در صورت وجود کوکی ارائه می‌شوند، آزمایش کنید. علاوه بر مسیرهای getServerSideProps و API، از کوکی‌های بعدی نیز می‌توان در سمت سرور برنامه استفاده کرد. بیایید به مثالی نگاه کنیم که در آن کاربر مقداری اطلاعات را دریافت می‌کند، آن‌ها را تأیید می‌کند، و سپس یک کوکی برای نشان دادن مشروعیت اطلاعات تنظیم می‌کند، همه در یک مسیر API.

پیاده سازی مسیرهای API

ادامه دهید و یک مسیر API جدید در داخل ./pages/api/verify-otp.ts ایجاد کنید. در داخل فایل، یک تابع کنترل کننده پایه با کد زیر ایجاد کنید:

export default function handler (
  req: NextApiRequest,
  res: NextApiResponse
) {
  return;  
}

کوکی طوری تنظیم می شود که قابلیت اعتماد کاربر را نشان دهد و پس از یک دوره خاص منقضی می شود. به طور خاص، اگر نوعی تأیید وجود داشته باشد، مانند پایگاه داده برای بررسی اعتبار یا برخی منطق OTP، منقضی می شود. عملکرد کنترل کننده به شرح زیر است:

if (
    req.method === 'POST' // only allow POST requests
  ) {
  // caputure the credentials required for verification from the request body
  const { name } = req.body;

  //   otp verification logic

  //   set cookie
  setCookie('authorize', true, {
    req,
    res,
    maxAge: 60 * 60 * 24 * 7, // 1 week
    path: '/',
  });

  //   respond with status and message
  return res.status(200).json({
    message: `${name} is authorized to access`,
    authorize: true,
    code: '20-0101-2092',
  });
}

در اینجا، کوکی پس از یک هفته منقضی می‌شود و کاربر را ملزم به تأیید مجدد می‌کند. در صورت تأیید موفقیت آمیز، API با یک پیام وضعیت 200 با داده های مربوطه که می تواند در صفحه نمایش نمایش داده شود، پاسخ می دهد.

دسترسی به مسیرهای API از قسمت فرانت

حالا بیایید سعی کنیم از قسمت جلویی به این مسیر دسترسی پیدا کنیم. این عملکرد تنها در صورتی فعال می شود که کاربر برای اولین بار ثبت نام کرده باشد. یک تابع با کد زیر ایجاد کنید:

const verifyOTP = async (name: string) => {
  const response = await fetch('/api/verify-otp', {
    method: 'POST',
    body: JSON.stringify({ name }),
  });

  const data = await response.json();

  if (data.authorize) {
    setAuthorization(true);
    setLaunchCode(data.code);
  } else {
    setAuthorization(false);
    alert('Invalid OTP');
  }
};

ما می توانیم از useState Hook برای ذخیره داده هایی که از مسیر API می آیند استفاده کنیم و دکمه را به صورت شرطی و بر اساس متغیر isAuthorized رندر کنیم. از کد زیر استفاده کنید:

const [isAuthorized, setAuthorization] = useState(false);
const [launchCode, setLaunchCode] = useState('');

با انجام این کار، ادامه دهید و کدهای نوشته شده را امتحان کنید. همانطور که در زیر نشان داده شده است، می‌توانید با باز کردن ابزار توسعه و انتخاب بخش Application، وجود کوکی را بررسی کنید.

من سعی کردم با ایجاد یک کد تصادفی در هر ورود، مثال را سرگرم‌کننده‌تر کنم. همچنین یک کوکی در مسیر API تنظیم می کند. می‌توانید ایده‌های اصلی خود را آزمایش کنید و چیز جالب‌تری را امتحان کنید!

نتیجه

کوکی ها برای توسعه وب بسیار مهم هستند. بسته‌های react-cookie و cookies-next به دلیل ویژگی‌ها و مزایای متمایزشان برای موارد استفاده مختلف ایده‌آل هستند. React-cookie بسیار محبوب‌تر است، APIهایی با کاربرد ساده و سازگاری عالی با چارچوب React ارائه می‌کند. در مقابل، cookies-next، یک پکیج  نسبتاً جدید که به صراحت برای Next.js ایجاد شده است، قابلیت‌های رندر سمت سرور و اقدامات امنیتی بهبود یافته را ارائه می‌دهد.

مهم نیست که کدام پکیج  را انتخاب می کنید، درک نحوه عملکرد کوکی ها و نحوه استفاده ایمن از آنها برای جلوگیری از هرگونه مشکل امنیتی ضروری است. این دو بسته، مدیریت کوکی‌ها را در برنامه‌های Next.js برای توسعه‌دهندگان ساده‌تر می‌کند و سفارشی‌سازی UX و افزایش سرعت وب‌سایت را ساده‌تر می‌کند.