_app.tsx 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import { useRouter } from "next/router"
  2. import Head from "next/head"
  3. import { IntlProvider } from "react-intl"
  4. import { useEffect } from "react"
  5. import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
  6. import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
  7. import { getDirForLocale } from "../utils/locales"
  8. import "../styles/globals.scss"
  9. import favicon32 from "../public/favicon-32x32.png"
  10. import favicon16 from "../public/favicon-16x16.png"
  11. function MyApp({ Component, pageProps }) {
  12. const { locale, defaultLocale } = useRouter()
  13. const dir = getDirForLocale(locale)
  14. useEffect(() => {
  15. document.documentElement.dir = dir
  16. }, [dir])
  17. const queryClient = new QueryClient()
  18. return (
  19. <IntlProvider
  20. locale={locale}
  21. defaultLocale={defaultLocale}
  22. messages={pageProps.intlMessages}
  23. >
  24. <QueryClientProvider client={queryClient}>
  25. <Head>
  26. <link
  27. rel="icon"
  28. type="image/png"
  29. sizes="32x32"
  30. href={favicon32.src}
  31. />
  32. <link
  33. rel="icon"
  34. type="image/png"
  35. sizes="16x16"
  36. href={favicon16.src}
  37. />
  38. </Head>
  39. <Component {...pageProps} />
  40. <ReactQueryDevtools initialIsOpen={false} />
  41. </QueryClientProvider>
  42. </IntlProvider>
  43. )
  44. }
  45. export default MyApp