Utils Function

💡

Folder location: src/lib

axios

The axiosInstance is a custom configured Axios instance for handling HTTP requests in the application. Here's what the code does:

Creates a base Axios instance with optional configuration (currently commented out)
Integrates with MockAdapter for simulating API responses during development
Sets up mock endpoints through MockEndPoints function
Exports the configured instance for use throughout the app

For production use, you should:

Remove the mock adapter setup
Configure proper baseURL and other options
Add any needed interceptors or default headers

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

registry

The StyledComponentsRegistry component is a wrapper that enables server-side rendering (SSR) of styled-components styles in Next.js 13+ applications. Here's what the code does:

Creates a server-side StyleSheet instance using useState with lazy initialization
Uses useServerInsertedHTML hook to inject styles into the document head during SSR
Clears the style tag after extraction to prevent style accumulation
Returns children directly on client-side
Wraps children with StyleSheetManager on server-side

For proper styled-components usage:

Wrap your app root component with this registry
Import and use in your root layout.tsx
Ensures styles are properly extracted and injected during SSR

"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>
  );
}

Data fetching