set cookies in ssr in next js 14 after getting response from api

[makhdum530]

can any one have idea or code for set cookies in ssr in next js 14 after getting response from api

[gustavostz]

You can set cookies in server-side rendering (SSR) after getting a response from an API by using the setHeader method in the response object (res). Example:

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  // Example API call
  const apiResponse = await fetch('https://your-api.com/data');
  const data = await apiResponse.json();

  // Set a cookie in the response
  res.setHeader('Set-Cookie', 'cookieName=cookieValue; path=/; HttpOnly');

  // Return the API data
  res.status(200).json(data);
}

In this example, after fetching data from an API, a cookie is set in the response headers before sending the data back to the client. The Set-Cookie header is used to set the cookie, where cookieName is the name of your cookie, and cookieValue is its value. You can also add other cookie attributes as needed, such as Expires, Max-Age, Domain, Path, Secure, and HttpOnly.

If you're setting cookies in a page's getServerSideProps function, you can use the res object in a similar way:

export async function getServerSideProps({ req, res }) {
  // Example API call
  const apiResponse = await fetch('https://your-api.com/data');
  const data = await apiResponse.json();

  // Set a cookie in the response
  res.setHeader('Set-Cookie', 'cookieName=cookieValue; path=/; HttpOnly');

  // Pass data to the page via props
  return { props: { data } };
}

In this case, the cookie is set in the response before the page is rendered and sent to the client.

[makhdum530]

My problem is that
i have next js 14. app folder doing ssr
now i want to store cookies in browser because it use on next js page for fetch data
Here is My code

import { redirect } from 'next/navigation';
import { PATH_PAGE } from 'routes/paths';
import axiosInstance from 'utils/axios';
import { CITY_API } from 'utils/constant';

// ----------------------------------------------------------------------

export const metadata = {
title: 'Minimal: The starting point for your next project',
};

export default async function HomePage() {

const data = await getData()
redirect(/${data?.slug})
}

export async function getData() {
let currentCity = ''
if (!currentCity) {
try {
const response = await axiosInstance.get(CITY_API.getNearCity);
currentCity = response?.data?.result
return currentCity;
} catch (error) {
console.log(error)
redirect(PATH_PAGE.notFound)
}
}
return currentCity;
}

[gustavostz]

Try this:

import { redirect } from 'next/navigation';
import { PATH_PAGE } from 'routes/paths';
import axiosInstance from 'utils/axios';
import { CITY_API } from 'utils/constant';

// ----------------------------------------------------------------------

export const metadata = {
  title: 'Minimal: The starting point for your next project',
};

export default async function HomePage({ currentCity }) {
  redirect(`/${currentCity?.slug}`);
}

export async function getServerSideProps({ req, res }) {
  let currentCity = '';

  try {
    const response = await axiosInstance.get(CITY_API.getNearCity);
    currentCity = response?.data?.result;

    // Set a cookie in the response
    res.setHeader('Set-Cookie', `currentCity=${currentCity.slug}; path=/; HttpOnly`);

    return {
      props: {
        currentCity,
      },
    };
  } catch (error) {
    console.log(error);
    return {
      redirect: {
        destination: PATH_PAGE.notFound,
        permanent: false,
      },
    };
  }
}

I made a small change on the code, now the getServerSideProps function fetches the current city data from an API and sets a cookie named currentCity with the value of the city's slug. The cookie is set in the response headers using res.setHeader. The current city data is then passed to the page component as a prop, and the page redirects to the corresponding slug.

Note: Make sure to adjust the cookie attributes (such as path, HttpOnly, etc.) according to your requirements.

[makhdum530]

But in next js 14 we can not use getServerSideProps

[questionablequestion]

@makhdum530 have you ever found a solution for this?

[furkansimw]

No matter what I did, it is not possible to update cookies on the server side (in the nextjs app router) we have to use the page router (only in serversideprops!)