-
Notifications
You must be signed in to change notification settings - Fork 134
/
_app.js
84 lines (77 loc) · 2.15 KB
/
_app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Script from 'next/script';
import { useRouter } from 'next/router';
import { ChakraProvider } from '@chakra-ui/react';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { appWithTranslation } from 'next-i18next';
import Head from 'next/head';
import en from '../public/locales/en';
import ig from '../public/locales/ig';
import * as gtag from '../lib/gtag';
import '../antd-extend.css';
import '../fonts.css';
import '../styles.css';
i18n
.use(initReactI18next)
.init({
resources: {
en,
ig,
},
lng: 'en',
fallbackLng: 'en',
defaultNS: 'common',
interpolation: {
escapeValue: false,
},
});
const MainApp = ({ Component, pageProps, ...rest }) => {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url);
};
router.events.on('routeChangeComplete', handleRouteChange);
return () => {
router.events.off('routeChangeComplete', handleRouteChange);
};
}, [router.events]);
return (
<>
<Head>
<title>Igbo API - The First African Language API</title>
</Head>
<>
<ChakraProvider>
<Component {...pageProps} {...rest} />
</ChakraProvider>
{/* Global Site Tag (gtag.js) - Google Analytics */}
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
/>
<Script
id="gtag-init"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${gtag.GA_TRACKING_ID}', {
page_path: window.location.pathname,
});
`,
}}
/>
</>
</>
);
};
MainApp.propTypes = {
Component: PropTypes.func.isRequired,
pageProps: PropTypes.shape({}).isRequired,
};
export default appWithTranslation(MainApp);