Exploring the process of retrieving cookies on both the client and server side with Next.js 13

Question

Exploring the process of retrieving cookies on both the client and server side with Next.js 13

One of the functionalities in my code is a custom function called myFetch, which serves as a wrapper for fetch to include a token in the header.

import clientCookies from "js-cookie";
import {cookies} from "next/headers";

const myFetchedData = async (...args) => {
let token
if (typeof window === "undefined") {
  // When running on the client side
  token = clientCookies.get("authToken")
} else {
  // When running on the server side
  serverCookies = cookies()
  token = serverCookies.get("authToken").value
}

args[1].headers = {"Authorization": `bearer ${token}`}
const response = await fetch(...args)
const information = await response.json()
return information
}

However, I encountered an error when using this function on the client side.

You're trying to import a component that requires next/headers, which only functions within a Server Component. But one of its parent components is assigned with "use client", making it a Client Component.
For more information, visit: https://nextjs.org/docs/getting-started/react-essentials

I am seeking guidance on how to specifically "import {cookies} from 'next/headers'" exclusively for server-side purposes.

javascript cookies next.js server-side-rendering

Answer 1

Answer №1

To dynamically import modules based on the type of the window object, you can conditionally import each module. If the window object is undefined, import the server module; otherwise, import the client module:

const myAsyncFunction = async (...args) => {
  let authToken;
  if (typeof window === "undefined") {
    const { cookies: serverCookies } = await import("next/headers");
    authToken = serverCookies().get("authToken").value;
  } else {
    const { default: clientCookies } = await import("js-cookie");
    authToken = clientCookies.get("authToken");
  }

  args[1].headers = { Authorization: `bearer ${authToken}` };
  const response = await fetch(...args);
  const responseData = await response.json();
  return responseData;
};

Answer 2

To dynamically import modules based on the type of the window object, you can conditionally import each module. If the window object is undefined, import the server module; otherwise, import the client module:

const myAsyncFunction = async (...args) => {
  let authToken;
  if (typeof window === "undefined") {
    const { cookies: serverCookies } = await import("next/headers");
    authToken = serverCookies().get("authToken").value;
  } else {
    const { default: clientCookies } = await import("js-cookie");
    authToken = clientCookies.get("authToken");
  }

  args[1].headers = { Authorization: `bearer ${authToken}` };
  const response = await fetch(...args);
  const responseData = await response.json();
  return responseData;
};

Answer 3

Answer №2

- (axios/client-axios.ts): Configuring Axios for client-side requests.
- (axios/server-axios.ts): Setting up Axios for server-side interactions.
- (axios/index.ts) :Dynamically selecting the appropriate Axios configuration based on the environment.
// axios/client-axios.ts
import axios, {
  AxiosInstance
}
from "axios";
import {
  API_BASE_URL
} from "../../lib/constant";
import {
  getCookie
} from "cookies-next";

const clientAxiosInstance: AxiosInstance = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    Authorization: `Bearer ${getCookie("accessToken")}`,
  },
});

export default clientAxiosInstance;

// axios/server-axios.ts
import axios, {
  AxiosInstance
} from "axios";
import {
  API_BASE_URL
} from "../../lib/constant";
import {
  cookies
} from "next/headers";

const serverAxiosInstance: AxiosInstance = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    Authorization: `Bearer ${cookies().get("accessToken")?.value}`,
  },
});

export default serverAxiosInstance;

// axios/index.ts
import {
  AxiosInstance
} from "axios";
let axiosInstance: AxiosInstance;

if (typeof window === "undefined") {
  axiosInstance = require("@/config/axios/server-axios").default;
} else {
  axiosInstance = require("@/config/axios/client-axios").default;
}

export default axiosInstance;

// example-usage
import axios from "@/config/axios";

axios.get("https://example.com/api/data").then((response) => {
  console.log(response.data);
});

Answer 4

- (axios/client-axios.ts): Configuring Axios for client-side requests.
- (axios/server-axios.ts): Setting up Axios for server-side interactions.
- (axios/index.ts) :Dynamically selecting the appropriate Axios configuration based on the environment.
// axios/client-axios.ts
import axios, {
  AxiosInstance
}
from "axios";
import {
  API_BASE_URL
} from "../../lib/constant";
import {
  getCookie
} from "cookies-next";

const clientAxiosInstance: AxiosInstance = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    Authorization: `Bearer ${getCookie("accessToken")}`,
  },
});

export default clientAxiosInstance;

// axios/server-axios.ts
import axios, {
  AxiosInstance
} from "axios";
import {
  API_BASE_URL
} from "../../lib/constant";
import {
  cookies
} from "next/headers";

const serverAxiosInstance: AxiosInstance = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    Authorization: `Bearer ${cookies().get("accessToken")?.value}`,
  },
});

export default serverAxiosInstance;

// axios/index.ts
import {
  AxiosInstance
} from "axios";
let axiosInstance: AxiosInstance;

if (typeof window === "undefined") {
  axiosInstance = require("@/config/axios/server-axios").default;
} else {
  axiosInstance = require("@/config/axios/client-axios").default;
}

export default axiosInstance;

// example-usage
import axios from "@/config/axios";

axios.get("https://example.com/api/data").then((response) => {
  console.log(response.data);
});

Exploring the process of retrieving cookies on both the client and server side with Next.js 13

Answer №1

Answer №2

Similar questions

"Utilizing jQuery's getJSON method in a session to fetch data

Updating votes on the client side in WebForms can be achieved by following these steps

When I utilize axios to send the request, the express routes for creating a new JSON entry in the mongo collection function correctly

Internet Explorer 9 encountered a JavaScript error: SCRIPT5007. It was unable to access the value of the property 'ui' because the object is null or undefined

NextJS encounters an 'ER_NOT_SUPPORTED_AUTH_MODE' error when attempting to establish a MySQL connection initialization through Environment Variables

"Exciting features of NextJS 13 include the utilization of client component callback functions

Issues encountered with executing `npm run dev`

Issues encountered in loading JavaScript with jQuery script

Tips on dynamically passing parameters in Angular's $resource

Store data retrieved in Next.js' getServerSideProps so that it can be accessed throughout the application without the need to continuously reload it each time the page is

AngularJS directive for Ionic Leaflet - Utilizing Service to switch tileLayer from side menu

Ways to convert field data to lowercase in MongoDB query result

Creating a Form with a Custom Format in AngularJS

The conditional logic in AngularJS is not functioning as expected

Creating a Dynamic Bootstrap 4 Dropdown Menu using Jquery Hover

Error encountered while compiling a method within a .vue component due to a syntax issue

Generating variable names dynamically in JavaScript

Using the JQuery template with $.get function does not produce the desired result

I'm experiencing an issue where the changes I make in .aspx files are not showing up when I debug or rebuild

Calculate the total of all values associated with a dynamically generated key within an array of objects