prefer lang on start

import axios from 'axios';
import useSWR from 'swr';
import { DataType } from 'types/global.types';

import { usePreferLanguage } from 'helpers/getPreferLanguage';

export const useHookSWR = () => {
  const fetcher = (args: string): DataType => axios.get(args).then((res) => res.data);
  const { data } = useSWR(`/languages/${usePreferLanguage()}.json`, fetcher);

  return data;
};

//CUSTOM HOOK
'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';

export const usePreferLanguage = () => {
  const { locale, replace, asPath } = useRouter();

  let browserLang = typeof window !== 'undefined' && window.navigator.language;

  const localst = browserLang && localStorage.getItem('lang');

  const languageFistTwo =
    browserLang.toString().length === 2 ? browserLang.toString() : browserLang.toString().substring(0, 2);

  const refresh = async (loc: string) => {
    return replace(`${process.env.NEXT_PUBLIC_PAGE}/${loc === 'en' ? '' : `${loc}`}${asPath}`);
  };

  const [lang, setLang] = useState(languageFistTwo);

  useEffect(() => {
    if (localst === null) {
      switch (languageFistTwo) {
        case 'ja':
          localStorage.setItem('lang', 'jp');
          setLang('jp');
          refresh('jp');
          break;
        case 'pl':
          localStorage.setItem('lang', 'pl');
          setLang('pl');
          refresh('pl');
          break;
        default:
          localStorage.setItem('lang', 'en');
          setLang('en');
          refresh('en');
          break;
      }
    } else if (!!localst && localst !== locale) {
      refresh(localst!);
    } else {
      setLang(locale!);
      localStorage.setItem('lang', locale!);
      refresh(locale!);
    }
  }, [locale]);

  return lang;
};