How to Set Server-Side Cookie In Next JS

// middleware.ts
import { NextRequest, NextResponse } from "next/server";
export async function middleware(req: NextRequest) {
  const res = NextResponse.next();
  //Setting cookies in response.
  //This will be sent back to the browser.
  res.cookies.set("my-cookie", "my-cookie-value", {
    path: "/",
    httpOnly: true,
  });

  // Setting cookies in the request.
  // This will be forwarded to api handler or getServerSideProps
  // depending on the route.
  req.cookies.set({
    name: "test",
    value: "test-cookie-value",
  });
  return res;
}
1234567891011121314151617181920

yarn add cookie && yarn add -D @types/cookie
1

// pages/api/hello.ts
import { serialize } from "cookie";
import type { NextApiRequest, NextApiResponse } from "next";
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const cookie = serialize("hello-cookie", "api-hello-cookie-value", {
    httpOnly: true,
    path: "/",
  });
  res.setHeader("Set-Cookie", cookie);
  res.status(200).json({ message: "Successfully set cookie!" });
}
1234567891011

import { serialize } from "cookie";
import { GetServerSideProps } from "next";
import React from "react";
const SsrPage = () => {
  return <div>SsrPage</div>;
};
export default SsrPage;
export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  const cookie = serialize("ssr-cookie", "ssr-cookie-value", {
    httpOnly: true,
    path: "/",
  });
  res.setHeader("Set-Cookie", cookie);
  return {
    props: {},
  };
};
1234567891011121314151617