إدارة الـ Headers والـ Cookies في Next.js

أولًا: يعني إيه Headers؟

الـ Headers هي معلومات إضافية بتتبعت مع الطلبات أو الردود بين المتصفح والسيرفر.

مثال: لما تفتح صفحة ويب, السيرفر ممكن يضيف Header بيحدد نوع المحتوى اللي هيترجع (JSON أو HTML).

طيب إزاي نعدل الـ Headers في Next.js؟

باستخدام الـ Middleware أو في إعدادات الـ API Routes.

مثال عملي: لتعديل الـ Headers باستخدام Middleware

// middleware.js<br /> export function middleware(request) {<br /> const response = NextResponse.next();<br /> // إضافة Header جديد<br /> response.headers.set('X-Custom-Header', 'Hello World');<br /> return response;<br /> }

هنا أي طلب بيمر على Middleware ده هيتضاف ليه Header اسمه X-Custom-Header بقيمة Hello World, ممكن تستخدمه لأغراض زي تحسين الأمان أو التتبع.

ثانيًا: يعني إيه Cookies؟

الـ Cookies عبارة عن بيانات صغيرة بيتم تخزينها في المتصفح. زي بيانات تسجيل الدخول أو إعدادات المستخدم.

طيب إزاي نضيف او نعدل على Cookies في Next.js؟ بمكتبة زي cookies-next.

– تثبيت المكتبة:

npm install cookies-next

– إضافة Cookie جديد:

import { setCookie } from 'cookies-next';<br /> export default function handler(req, res) {<br /> setCookie('user', 'Magdy Zahran', { req, res, maxAge: 60 * 60 * 24 });<br /> res.status(200).json({ message: 'Cookie Set!' });<br /> }

الكود ده بيضيف Cookie باسم user وقيمة Magdy Zahran لمدة 24 ساعة.

– قراءة الـ Cookie:

import { getCookie } from 'cookies-next';<br /> export default function handler(req, res) {<br /> const user = getCookie('user', { req, res });<br /> res.status(200).json({ user });<br /> }

– مسح الـ Cookie:

import { deleteCookie } from 'cookies-next';<br /> export default function handler(req, res) {<br /> deleteCookie('user', { req, res });<br /> res.status(200).json({ message: 'Cookie Deleted!' });<br /> }

طيب انا هستخدم الكلام ده فإيه؟

• إدارة المستخدمين:

  • تخزين بيانات تسجيل الدخول في Cookies.
  • قراءة بيانات المستخدم عند كل طلب.

• تحسين الأمان:

  •  إضافة Headers زي Strict-Transport-Security أو Content-Security-Policy لحماية موقعك من الهجمات.

• تحسين الاداء:

  •  استخدام Headers زي Cache-Control للتحكم في الكاش وزيادة سرعة الموقع.

وبكده نكون خلصنا شرحنا عن ن الـ Headers والـ Cookies في Next.js. لو عندك سؤال أو استفسار، اكتب في الكومنتات.