_app.js 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import PropTypes from 'prop-types';
  2. import Head from 'next/head';
  3. import { ThemeProvider } from '@mui/material/styles';
  4. import CssBaseline from '@mui/material/CssBaseline';
  5. import { CacheProvider } from '@emotion/react';
  6. import theme from '../src/theme';
  7. import createEmotionCache from '../src/createEmotionCache';
  8. import Layout from '../components/Layout'
  9. import * as React from 'react';
  10. const DynamicComponentWithNoSSR = <>Some JSX</>
  11. // Client-side cache, shared for the whole session of the user in the browser.
  12. const clientSideEmotionCache = createEmotionCache();
  13. export default function MyApp(props) {
  14. const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  15. if (typeof window !== 'undefined') {
  16. console.log('You are on the browser')
  17. } else {
  18. console.log('You are on the server')
  19. }
  20. return (
  21. <>
  22. <CacheProvider value={emotionCache}>
  23. <Head>
  24. <meta name="viewport" content="initial-scale=1, width=device-width" />
  25. </Head>
  26. <Layout>
  27. <ThemeProvider theme={theme}>
  28. {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
  29. <CssBaseline />
  30. <Component {...pageProps} />
  31. </ThemeProvider>
  32. </Layout>
  33. </CacheProvider>
  34. </>
  35. );
  36. }
  37. MyApp.propTypes = {
  38. Component: PropTypes.elementType.isRequired,
  39. emotionCache: PropTypes.object,
  40. pageProps: PropTypes.object.isRequired,
  41. };