next/app#AppProps TypeScript Examples

The following examples show how to use next/app#AppProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: _app.tsx    From website with Apache License 2.0 7 votes vote down vote up 
function MyApp({ Component, pageProps }: AppProps) {
  /* niceeeee */
  console.log(`
       __            __        __  __             ______    ______  
      /  |          /  |      /  |/  |           /      \  /      \ 
  ____$$ |  ______  $$ |____  $$ |$$/   ______  /$$$$$$  |/$$$$$$  |
 /    $$ | /      \ $$      \ $$ |/  | /      \ $$ |  $$ |$$ \__$$/ 
/$$$$$$$ | $$$$$$  |$$$$$$$  |$$ |$$ | $$$$$$  |$$ |  $$ |$$      \ 
$$ |  $$ | /    $$ |$$ |  $$ |$$ |$$ | /    $$ |$$ |  $$ | $$$$$$  |
$$ \__$$ |/$$$$$$$ |$$ |  $$ |$$ |$$ |/$$$$$$$ |$$ \__$$ |/  \__$$ |
$$    $$ |$$    $$ |$$ |  $$ |$$ |$$ |$$    $$ |$$    $$/ $$    $$/ 
 $$$$$$$/  $$$$$$$/ $$/   $$/ $$/ $$/  $$$$$$$/  $$$$$$/   $$$$$$/  
  `);

  const preferredTheme = usePreferredTheme();

  return (
    <StyledEngineProvider injectFirst>
      <SWRConfig
        value={{
          fetcher,
          refreshInterval: 12000000,
          revalidateOnFocus: false,
        }}
      >
        <ThemeProvider theme={preferredTheme === "dark" ? Theme : LightTheme}>
          <GlobalStyles />
          <Component {...pageProps} />
        </ThemeProvider>
      </SWRConfig>
    </StyledEngineProvider>
  );
}
Example #2
Source File: _app.tsx    From Demae with MIT License 6 votes vote down vote up 
App = ({ Component, pageProps, router }: AppProps) => {
	return (
		<ThemeProvider theme={theme}>
			<CssBaseline />
			<Provider>
				<Router location={router.asPath}>
					<Component {...pageProps} />
				</Router >
			</Provider>
		</ThemeProvider>
	)
}
Example #3
Source File: _app.tsx    From MultiFaucet with GNU Affero General Public License v3.0 6 votes vote down vote up 
// Toast notifications

export default function MultiFaucet({ Component, pageProps }: AppProps) {
  return (
    // Wrap app in auth session provider
    <Provider session={pageProps.session}>
      {/* Toast container */}
      <ToastContainer />

      {/* Site */}
      <Component {...pageProps} />
    </Provider>
  );
}
Example #4
Source File: _app.tsx    From merkle-airdrop-starter with GNU Affero General Public License v3.0 6 votes vote down vote up 
// Types

// Export application
export default function MerkleAirdropStarter({
  Component,
  pageProps,
}: AppProps) {
  return (
    // Wrap application in global state provider
    <StateProvider>
      <Component {...pageProps} />
    </StateProvider>
  );
}
Example #5
Source File: _app.tsx    From pawnft with GNU General Public License v3.0 6 votes vote down vote up 
// Export application
export default function PawnBank({ Component, pageProps }: AppProps) {
  return (
    // Wrap in global state provider
    <StateProvider>
      {/* Toast container at top for notifications */}
      <ToastContainer />
      <Component {...pageProps} />
    </StateProvider>
  );
}
Example #6
Source File: _app.tsx    From nextjs-shopify with MIT License 6 votes vote down vote up 
export default function MyApp({ Component, pageProps }: AppProps) {
  const Layout = (Component as any).Layout || Noop
  return (
    <>
      <Layout pageProps={pageProps}>
        <Component {...pageProps} />
      </Layout>
    </>
  )
}
Example #7
Source File: _app.tsx    From frames with Mozilla Public License 2.0 6 votes vote down vote up 
export default function MyApp({Component, pageProps}: AppProps) {
    NProgress.configure({trickleSpeed: 1200, showSpinner: false, easing: 'ease-in-out', speed: 500});
    const {loading} = useDetectPageChange();

    useEffect(() => {
        loading ? NProgress.start() : NProgress.done();
    }, [loading]);

    return (
        <RecoilRoot>
            <FramesConsumers>
                <Component {...pageProps} />
            </FramesConsumers>
        </RecoilRoot>
    )
}
Example #8
Source File: _app.tsx    From space-traveling with MIT License 6 votes vote down vote up 
function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <>
      <NextNprogress
        color="#FF57B2"
        startPosition={0.3}
        stopDelayMs={200}
        height={3}
      />
      <Component {...pageProps} />
    </>
  );
}
Example #9
Source File: _app.tsx    From use-selected-items-hook with MIT License 6 votes vote down vote up 
App: NextPage<AppProps> = ({ Component, pageProps }: AppProps) => (
  <div>
    <Head>
      <title>useSelectedItems</title>
      <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
    </Head>

    <div className="sm:py-8 h-screen w-screen overflow-y-hidden bg-indigo-200">
      <div
        className="h-full min-h-full bg-white mx-auto overflow-hidden shadow-xl sm:rounded overflow-y-auto"
        style={{ maxWidth: "375px" }}
      >
        <Component {...pageProps} />
      </div>
    </div>
  </div>
)
Example #10
Source File: _app.tsx    From BloggerWeb with GNU General Public License v3.0 6 votes vote down vote up 
MyApp = ({ Component, pageProps }: AppProps): JSX.Element => {
  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <ThemeProvider attribute="class" enableSystem={false} defaultTheme="dark">
      <Provider session={pageProps.session}>
        <Component {...pageProps} />
      </Provider>
    </ThemeProvider>
  );
}
Example #11
Source File: _app.tsx    From master-frontend-lemoncode with MIT License 6 votes vote down vote up 
App: React.FunctionComponent<AppProps> = (props) => {
  const { Component, pageProps } = props;

  return (
    <ThemeProviderComponent>
      <Component {...pageProps} />
    </ThemeProviderComponent>
  );
}
Example #12
Source File: _app.tsx    From website with MIT License 6 votes vote down vote up 
function MyApp({ Component, pageProps }: AppProps) {
	return (
		<Fragment>
			<div className="flex justify-center">
				<div>
					<Navigation />
				</div>
			</div>
			<div className="flex justify-center">
				<div>
					<Component {...pageProps} />
				</div>
			</div>
			<Head>
				<title>milo.solar</title>
			</Head>
			{process.env.NODE_ENV === 'production' ? (
				<>
					<Script async src="https://arc.io/widget.min.js#TbGGrA4L" />
				</>
			) : null}
		</Fragment>
	);
}
Example #13
Source File: _app.tsx    From RareCamp with Apache License 2.0 6 votes vote down vote up 
function MyAppWrapper(props: AppProps) {
  const router = useRouter()
  axios.interceptors.request.use(async function (config) {
    try {
      const currentUserSession = await Auth.currentSession()
      const Authorization = currentUserSession
        .getIdToken()
        .getJwtToken()
      config.headers.Authorization = Authorization
    } catch (e) {
      await router.push('/auth/login')
    }

    return config
  })

  return (
    <QueryClientProvider client={queryClient}>
      <MyApp {...props} />
    </QueryClientProvider>
  )
}
Example #14
Source File: _app.tsx    From Teyvat.moe with GNU General Public License v3.0 6 votes vote down vote up 
_app: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
  // TODO: Remove server-side JSS styles.
  // Normally you'd call 'useEffect' to call jssStyles.parentElement.removeChild(jssStyles);
  // However, I was experiencing an unknown bug where the old class names weren't being replaced
  // with the new ones, so I just got rid of the call so that the old class names would work.

  return (
    <>
      {/* StoreProvider allows hooks and components to access the Redux store. */}
      <StoreProvider store={store}>
        {/* ThemeProvider allows for child components to access the Material UI theme. */}
        <ThemeProvider theme={Theme}>
          {/* CSSBaseline injects a basic cascading style sheet for use by Material UI styling. */}
          <CssBaseline />
          {/* NotificationProvider handles the Notistack.
              Must be a child of StoreProvider since Redux handles notifications. */}
          <StylesProvider generateClassName={generateClassName}>
            <NotificationProvider>
              {/* ErrorHandler provides a fallback interface to use if the web page crashes. */}
              <ErrorHandler errorHandler={FullPageErrorHandler}>
                {/* Component provides the actual map content. */}
                <Component {...pageProps} />
              </ErrorHandler>
            </NotificationProvider>
          </StylesProvider>
        </ThemeProvider>
      </StoreProvider>
    </>
  );
}
Example #15
Source File: _app.tsx    From NextPay with MIT License 6 votes vote down vote up 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Head>
        <title>NextPay</title>
      </Head>
      <GlobalStyles />
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}
Example #16
Source File: _app.tsx    From frontend-boilerplate with MIT License 6 votes vote down vote up 
export default function App({ Component, pageProps, router }: AppProps) {
  return (
    <CookiesProvider>
      <QueryClientProvider client={queryClient}>
        <Header />
        <Component {...pageProps} key={router.route} />
      </QueryClientProvider>
    </CookiesProvider>
  );
}
Example #17
Source File: _app.tsx    From youtube-2020-june-material-ui-themes with MIT License 6 votes vote down vote up 
export default function MyApp({ Component, pageProps }: AppProps) {
  React.useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>Multi-Step Form</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <ThemeProvider theme={theme}>
        <AppBar position="fixed">
          <Toolbar variant="dense">
            <Typography variant="h6">Multi-Step Form</Typography>
          </Toolbar>
        </AppBar>

        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <Container>
          <Box marginTop={10}>
            <Component {...pageProps} />
          </Box>
        </Container>
      </ThemeProvider>
    </React.Fragment>
  );
}
Example #18
Source File: _app.tsx    From Wern-Fullstack-Template with MIT License 6 votes vote down vote up 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <title>Wern Template</title>
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width"
        />
      </Head>
      <AppProvider>
        <Component {...pageProps} />
      </AppProvider>
    </>
  )
}
Example #19
Source File: _app.tsx    From react-celo with MIT License 6 votes vote down vote up 
function MyApp({ Component, pageProps, router }: AppProps): React.ReactElement {
  if (router.route !== '/') {
    return (
      <div className="max-w-screen-sm mx-auto py-10 md:py-20 px-4">
        <Component {...pageProps} />
      </div>
    );
  }

  return (
    <CeloProvider
      dapp={{
        name: 'react-celo demo',
        description: 'A demo DApp to showcase functionality',
        url: 'https://react-celo.vercel.app',
        icon: 'https://react-celo.vercel.app/favicon.ico',
      }}
      network={Alfajores}
      connectModal={{
        providersOptions: { searchable: true },
      }}
    >
      <Toaster
        position="top-right"
        toastOptions={{
          className: 'w-72 md:w-96',
          style: {
            padding: '0px',
          },
        }}
      />
      <div className="max-w-screen-sm mx-auto py-10 md:py-20 px-4">
        <Component {...pageProps} />
      </div>
    </CeloProvider>
  );
}
Example #20
Source File: _app.tsx    From my-next.js-starter with MIT License 6 votes vote down vote up 
NextApp: React.FC<AppProps> = (props) => {
  return (
    <React.Fragment>
      <Head>
        <title>My Next.js Starter</title>
        {/* Use minimum-scale=1 to enable GPU rasterization */}
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
        />
      </Head>
      <props.Component {...props.pageProps} />
    </React.Fragment>
  );
}
Example #21
Source File: _app.tsx    From aljoseph.co with MIT License 6 votes vote down vote up 
function MyApp({ Component, pageProps }: AppProps) {
	return (
		<ThemeProvider attribute="class">
			<MDXProvider components={MDXComponents}>
				<Component {...pageProps} />
			</MDXProvider>
		</ThemeProvider>
	);
}
Example #22
Source File: _app.tsx    From cpinitiative with Mozilla Public License 2.0 6 votes vote down vote up 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <SessionProvider session={pageProps.session}>
      <FirebaseProvider>
        <Component {...pageProps} />
      </FirebaseProvider>
    </SessionProvider>
  )
}
Example #23
Source File: _app.tsx    From ide with Mozilla Public License 2.0 6 votes vote down vote up 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ConnectionProvider>
      <WorkspaceInitializer>
        <SettingsProvider>
          <Component {...pageProps} />
        </SettingsProvider>
      </WorkspaceInitializer>
    </ConnectionProvider>
  );
}
Example #24
Source File: _app.tsx    From plug-react with MIT License 6 votes vote down vote up 
function App({Component, pageProps}: AppProps): ReactElement {
    return (
        <CroctProvider appId="00000000-0000-0000-0000-000000000000">
            <Head>
                <link rel="icon" href="/favicon.svg" />
                <meta
                    name="description"
                    content="Example of how to integrate Croct into React applications rendered on the client-side."
                />
                <title>Croct | React Next.js Example</title>
            </Head>
            <Script
                strategy="beforeInteractive"
                src="https://cdn.croct.io/js/v1/app/00000000-0000-0000-0000-000000000000/custom.js"
            />
            <Layout>
                <Component {...pageProps} />
            </Layout>
        </CroctProvider>
    );
}
Example #25
Source File: _app.tsx    From apps with GNU Affero General Public License v3.0 6 votes vote down vote up 
export default function App(props: AppProps): ReactElement {
  const version = useWebappVersion();
  const deviceId = useDeviceId();

  return (
    <ProgressiveEnhancementContextProvider>
      <QueryClientProvider client={queryClient}>
        <BootDataProvider app="web" getRedirectUri={getRedirectUri}>
          <SubscriptionContextProvider>
            <AnalyticsContextProvider
              app="webapp"
              version={version}
              getPage={getPage}
              deviceId={deviceId}
            >
              <InternalApp {...props} />
            </AnalyticsContextProvider>
          </SubscriptionContextProvider>
        </BootDataProvider>
      </QueryClientProvider>
    </ProgressiveEnhancementContextProvider>
  );
}
Example #26
Source File: _app.tsx    From dendron with GNU Affero General Public License v3.0 6 votes vote down vote up 
function AppContainer(appProps: AppProps) {
  const { config } = appProps.pageProps as {
    config: IntermediateDendronConfig;
  };
  const logger = createLogger("AppContainer");
  useEffect(() => {
    const logLevel = getLogLevel();
    setLogLevel(logLevel);
  }, []);
  const defaultTheme = ConfigUtils.getPublishing(config).theme || Theme.LIGHT;
  logger.info({ ctx: "enter", defaultTheme });
  return (
    <Provider store={combinedStore}>
      <ThemeSwitcherProvider themeMap={themes} defaultTheme={defaultTheme}>
        <DendronApp {...appProps} />
      </ThemeSwitcherProvider>
    </Provider>
  );
}
Example #27
Source File: _app.tsx    From bedrock-dot-dev with GNU General Public License v3.0 6 votes vote down vote up 
// Router.events.on('hashChangeStart', () => console.log('hashChangeStart'))
// Router.events.on('hashChangeComplete', () => console.log('hashChangeComplete'))

function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    console.log('Hey there!')
  }, [])

  return (
    <ThemeProvider defaultTheme='system' attribute='class' disableTransitionOnChange>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}
Example #28
Source File: _app.tsx    From roamjs-com with MIT License 6 votes vote down vote up 
MyApp = ({ Component, pageProps, router }: AppProps): JSX.Element => {
  useTawkTo();
  return (
    <ClerkProvider frontendApi={process.env.NEXT_PUBLIC_CLERK_FRONTEND_API}>
      <ThemeProvider>
        <MDXProviderWrapper pathname={router.pathname}>
          <Component {...pageProps} />
        </MDXProviderWrapper>
      </ThemeProvider>
    </ClerkProvider>
  );
}
Example #29
Source File: _app.tsx    From reddium with MIT License 6 votes vote down vote up 
App = ({ Component, pageProps }: AppProps) => {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: URL) => {
      gtag.pageview(url);
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

  return (
    <div>
      <Component {...pageProps} />
      <CookieBanner />
    </div>
  );
}