Next.js Cookie Management

const theme = “dark”;
document.cookie = `theme=${theme}; path=/; expires=Fri, 1 Dec 2024 23:59:59 GMT; Secure; SameSite=Strict;`;

  function setCookie(name, value, days, path = '/', secure = false, sameSite = 'Lax') {
	let expires = "";
    
	if (days) {
    	const date = new Date();
    	date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    	expires = "; expires=" + date.toUTCString();
	}

	let cookie = `${name}=${value}${expires}; path=${path}; SameSite=${sameSite}`;

	if (secure) {
    	cookie += "; Secure";
	}

	document.cookie = cookie;
}

function getCookie(name) {
  const match = document.cookie
    .split("; ") // Splits all cookies into individual elements.
    .find((row) => row.startsWith(`${name}=`))
    ?.split("=")[1]; 
    // The callback function in find locates the row that starts with the cookie name, 
    // splits it, and retrieves the value.
  if (match) {
    return match; // If the cookie is found, it returns the value.
  }
  return null; // If the cookie is not found, it returns null.
}

console.log(getCookie('theme')); //dark

import { cookies } from "next/headers";

cookies().set("cookieName", value, {
    	httpOnly: true,
    	maxAge: 60 * 60 * 24 * 30,
    	secure: true,
  	});

import { cookies } from "next/headers"; 
const cookie = cookies().get("cookieName");
//or
const allCookies = cookies().getAll();

"use client";

import { useState } from "react";

export default function LangMenu() {
  const [selectedLanguage, setSelectedLanguage] = useState("");

  const handleLang = (event: React.ChangeEvent<HTMLSelectElement>) => {
	const language = event.target.value;
	setSelectedLanguage(language);
  };

  return (
  	<select
    	className="bg-transparent"
    	id="language"
    	value={selectedLanguage}
    	onChange={handleLang}
  	>
    	<option value="en">English</option>
    	<option value="tr">Türkçe</option>
    	<option value="de">Deutsch</option>
  	</select>
  );
}

"use server";

import { cookies } from "next/headers";

const languages = ["en", "de", "tr"] as const;
export type Languages = (typeof languages)[number];

export async function setLanguage(
  language: Languages
): Promise<{ success: boolean }> {
  try {
	if (languages.includes(language)) {
  	cookies().set("userLanguage", language, {
    	httpOnly: true,
    	path: "/",
    	maxAge: 60 * 60 * 24 * 30,
    	secure: process.env.NODE_ENV === "production",
  	});
  	return { success: true };
	} else return { success: false };
  } catch (error) {
	console.log("Set language error:", error);
	return { success: false };
  }
}

"use client";

import { setLanguage, Languages } from "@/app/actions/languageAction";
import { useState } from "react";

export default function LangMenu() {
  const [selectedLanguage, setSelectedLanguage] = useState<Languages>("en");

  const handleLang = async (event: React.ChangeEvent<HTMLSelectElement>) => {
    const language = event.target.value as Languages;
    const res = await setLanguage(language);
    //We used the server action as a regular promise-returning function with await
    if (res.success) {
      /**
       * If the selected language input is processed by the server
       * correctly, you can handle i18n language changes or
       * [lang] routing operations after this check.
       */
      setSelectedLanguage(language);
    }
  };
  return (
    <select
      className="bg-transparent"
      id="language"
      value={selectedLanguage}
      onChange={handleLang}
    >
      <option value="en">English</option>
      <option value="tr">Türkçe</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

...

export async function getLanguage(): Promise<Languages | null> {
  try {
	const cookie = cookies().get("userLanguage");
	if (languages.includes(cookie?.value as Languages)) {
  	return cookie!.value as Languages;
	} else return null;
  } catch (error) {
	console.log("Language cookie error", error);
	return null;
  }
}

import { NextRequest, NextResponse } from "next/server";
import { getLanguage } from "./app/actions/languageAction";

export async function middleware(req: NextRequest) {
  const url = req.nextUrl;
  /**
   * The getLanguage() function, which we defined with the 'use server' directive,
   * and the Cookies() functions can be directly used in middleware outside of the server action function.
   */
  const lang = await getLanguage();
  /**
   * If there is no language prefix in the URL
   * and the getLanguage function retrieves a language from the cookie,
   * the middleware will add the language prefix to the URL.
   * It is better to first check if there is already a language prefix in the URL.
   */
  if (lang && !url.pathname.startsWith(`/${lang}`)) {
    url.pathname = `/${lang}${url.pathname}`;
    return NextResponse.redirect(url);
  }
  /**
   * If there is no cookie, set the default language preference
   * or detect the language based on Accept-Language.
   */
  return NextResponse.next();
}

export const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico).*)"],
};

...
export async function setLanguage(
  language: Languages
): Promise<{ success: boolean }> {
  try {
	if (languages.includes(language)) {
  	cookies().set("userLanguage", language, {
    	httpOnly: true,
    	path: "/",
    	maxAge: 60 * 60 * 24 * 30,
    	secure: process.env.NODE_ENV === "production",
  	});
  	return { success: true };
	} else return { success: false };
  } catch (error) {
	console.log("Set language error:", error);
	return { success: false };
  }
}
...