Skip to content

Commit bee95dc

Browse files
pooriasetpooriaset
committed
fix: resolve hydration error by checking userAgent on initialize of app
1 parent 31897a8 commit bee95dc

File tree

5 files changed

+52
-51
lines changed

5 files changed

+52
-51
lines changed

‎src/app/[locale]/layout.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import RTLProvider from '@/components/common/RTLProvider';
22
import { defaultTheme, globalStyles, persianTheme } from '@/config/theme';
33
import { Locale, languages } from '@/navigation';
44
import { ApolloProvider, AppProvider } from '@/providers';
5+
import I18nProvider from '@/providers/I18nProvider';
56
import {
67
CssBaseline,
78
GlobalStyles,
89
ThemeOptions,
910
ThemeProvider,
1011
} from '@mui/material';
1112
import type { Metadata } from 'next';
12-
import { NextIntlClientProvider, useMessages } from 'next-intl';
13+
import { headers } from 'next/headers';
14+
import { userAgent } from 'next/server';
1315
import { PropsWithChildren } from 'react';
1416

15-
export type WithChildren<T = unknown> = T & { children: React.ReactNode };
16-
1717
export type LocaleLayoutParams = { params: { locale: Locale } };
1818
type LocaleLayoutProperties = PropsWithChildren<LocaleLayoutParams>;
1919

@@ -22,30 +22,30 @@ export const metadata: Metadata = {
2222
description: 'Shop app',
2323
};
2424

25-
export default function LocaleLayout({
25+
export default async function LocaleLayout({
2626
children,
2727
params: { locale },
28-
}: WithChildren<LocaleLayoutProperties>) {
29-
const messages = useMessages();
28+
}: PropsWithChildren<LocaleLayoutProperties>) {
29+
const reqUserAgent = userAgent({ headers: headers() });
3030

3131
const themes: Record<Locale, ThemeOptions> = {
3232
en: defaultTheme,
3333
fa: persianTheme,
3434
};
3535

3636
return (
37-
<html lang={locale} dir={languages?.[locale]?.direction ?? 'ltr'}>
37+
<html lang={locale} dir={languages?.[locale]?.direction}>
3838
<body>
3939
<ThemeProvider theme={themes[locale] ?? defaultTheme}>
40-
<CssBaseline />
41-
<GlobalStyles styles={globalStyles} />
42-
<RTLProvider>
43-
<NextIntlClientProvider messages={messages} locale={locale}>
44-
<AppProvider>
40+
<AppProvider userAgent={reqUserAgent}>
41+
<CssBaseline />
42+
<GlobalStyles styles={globalStyles} />
43+
<RTLProvider>
44+
<I18nProvider locale={locale}>
4545
<ApolloProvider>{children}</ApolloProvider>
46-
</AppProvider>
47-
</NextIntlClientProvider>
48-
</RTLProvider>
46+
</I18nProvider>
47+
</RTLProvider>
48+
</AppProvider>
4949
</ThemeProvider>
5050
</body>
5151
</html>

‎src/hooks/useIsMobile.ts‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎src/providers/AppProvider.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1-
"use client";
1+
'use client';
22

3-
import { appContext } from "@/contexts/appContext";
4-
import useIsMobile from "@/hooks/useIsMobile";
5-
import { FC, PropsWithChildren } from "react";
3+
import { appContext } from '@/contexts/appContext';
4+
import { Theme, useMediaQuery } from '@mui/material';
5+
import { FC, PropsWithChildren } from 'react';
6+
export interface AppProviderProps {
7+
userAgent: any;
8+
}
9+
const AppProvider: FC<PropsWithChildren<AppProviderProps>> = ({
10+
children,
11+
userAgent,
12+
}) => {
13+
const inMobileView = useMediaQuery((theme: Theme) =>
14+
theme.breakpoints.down('md'),
15+
);
616

7-
const AppProvider: FC<PropsWithChildren> = ({ children }) => {
8-
const isMobile = useIsMobile();
917
return (
1018
<appContext.Provider
1119
value={{
12-
isMobile,
20+
isMobile: userAgent.device.type === 'mobile' || inMobileView,
1321
}}
1422
>
1523
{children}

‎src/providers/I18nProvider.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Locale } from '@/navigation';
2+
import { NextIntlClientProvider, useMessages } from 'next-intl';
3+
import React, { FC, PropsWithChildren } from 'react';
4+
5+
export interface I18nProviderProps {
6+
locale: Locale;
7+
}
8+
9+
const I18nProvider: FC<PropsWithChildren<I18nProviderProps>> = ({
10+
children,
11+
locale,
12+
}) => {
13+
const messages = useMessages();
14+
15+
return (
16+
<NextIntlClientProvider messages={messages} locale={locale}>
17+
{children}
18+
</NextIntlClientProvider>
19+
);
20+
};
21+
22+
export default I18nProvider;

‎src/utils/responsive.ts‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

0 commit comments

Comments
 (0)