Utils Function

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'
import { MockEndPoints } from '__server__'
 
// Axios instance
const axiosInstance = axios.create({
  // baseURL: "http://localhost:3000",
  // Axios configuration options here
})
 
// Remove following 2 lines if you don't want to use MockAdapter
export const Mock = new MockAdapter(axiosInstance)
MockEndPoints(Mock)
 
export default axiosInstance

"use client";
 
import { useState, ReactNode } from "react";
import { useServerInsertedHTML } from "next/navigation";
import { ServerStyleSheet, StyleSheetManager } from "styled-components";
 
export default function StyledComponentsRegistry({ children }: { children: ReactNode }) {
  // Only create stylesheet once with lazy initial state
  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
 
  useServerInsertedHTML(() => {
    const styles = styledComponentsStyleSheet.getStyleElement();
    styledComponentsStyleSheet.instance.clearTag();
    return <>{styles}</>;
  });
 
  if (typeof window !== "undefined") return <>{children}</>;
 
  return (
    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>{children}</StyleSheetManager>
  );
}