_app.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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. import ResponsiveAppBar from '../components/Nav'
  11. import {BrowserRouter} from 'react-router-dom';
  12. const DynamicComponentWithNoSSR = <>Some JSX</>
  13. // Client-side cache, shared for the whole session of the user in the browser.
  14. const clientSideEmotionCache = createEmotionCache();
  15. export default function MyApp(props) {
  16. const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;
  17. if (typeof window !== 'undefined') {
  18. console.log('You are on the browser')
  19. } else {
  20. console.log('You are on the server')
  21. }
  22. return (
  23. <>
  24. <CacheProvider value={emotionCache}>
  25. <Head>
  26. <meta name="viewport" content="initial-scale=1, width=device-width" />
  27. </Head>
  28. <Layout>
  29. <ThemeProvider theme={theme}>
  30. {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
  31. <CssBaseline />
  32. <Component {...pageProps} />
  33. </ThemeProvider>
  34. </Layout>
  35. <BrowserRouter>
  36. <ResponsiveAppBar />
  37. </BrowserRouter>
  38. </CacheProvider>
  39. </>
  40. );
  41. }
  42. MyApp.propTypes = {
  43. Component: PropTypes.elementType.isRequired,
  44. emotionCache: PropTypes.object,
  45. pageProps: PropTypes.object.isRequired,
  46. };