Skip to content

Instantly share code, notes, and snippets.

@nolimits4web

nolimits4web/_app.js

Last active March 5, 2021 15:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nolimits4web/352dc3f2fc8f2013b8ba0966c7fc9a29 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nolimits4web/352dc3f2fc8f2013b8ba0966c7fc9a29 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. nolimits4web revised this gist Mar 5, 2021. 1 changed file with 10 additions and 2 deletions.
    12 changes: 10 additions & 2 deletions _app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,6 +14,14 @@ import "../styles/globals.css";
    // Install Framework7 React plugin for Framework7
    Framework7.use(Framework7React);

    // App routes
    const routes = [
    {
    path: '/',
    asyncComponent: () => import('./index'),
    },
    ];

    function MyApp({ Component, pageProps }) {
    // current Next.js route
    const router = useRouter();
    @@ -24,11 +32,11 @@ function MyApp({ Component, pageProps }) {

    return (
    /*
    Here we pass initial server URL to the Framework7's App.
    Here we pass initial server URL and routes to the Framework7's App.
    It is required because Framework7 will be initialized on server-side,
    and we need to know this URL to correctly load pages by Framework7 router
    */
    <App url={url}>
    <App url={url} routes={routes}>
    {/*
    Create main View.
    Apparently we need to enable browserHistory to navigating by URL
  2. nolimits4web revised this gist Mar 5, 2021. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion _app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -49,4 +49,6 @@ function MyApp({ Component, pageProps }) {
    </View>
    </App>
    );
    }
    }

    export default MyApp;
  3. nolimits4web created this gist Mar 5, 2021.
    52 changes: 52 additions & 0 deletions _app.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    // Import Framework7
    import Framework7 from "framework7/lite-bundle";
    // Import Framework7-React and components
    import Framework7React, { App, View } from "framework7-react";
    // Next router
    import { useRouter } from "next/router";

    // Import icons and styles
    import "framework7/framework7-bundle.css";
    import "framework7-icons/css/framework7-icons.css";
    import "material-icons/iconfont/material-icons.css";
    import "../styles/globals.css";

    // Install Framework7 React plugin for Framework7
    Framework7.use(Framework7React);

    function MyApp({ Component, pageProps }) {
    // current Next.js route
    const router = useRouter();
    /*
    Here we need to know (mostly on server-side) on what URL user opens our app
    */
    const url = `${process.env.NEXT_PUBLIC_HOST}${router.asPath}`;

    return (
    /*
    Here we pass initial server URL to the Framework7's App.
    It is required because Framework7 will be initialized on server-side,
    and we need to know this URL to correctly load pages by Framework7 router
    */
    <App url={url}>
    {/*
    Create main View.
    Apparently we need to enable browserHistory to navigating by URL
    */}
    <View
    main
    browserHistory
    browserHistorySeparator=""
    browserHistoryInitialMatch={true}
    browserHistoryStoreHistory={false}
    url="/"
    >
    {/*
    Initial page components (returned by Next.js).
    Here it is mandatory to set `initialPage` prop on it.
    */}
    <Component initialPage {...pageProps} />
    </View>
    </App>
    );
    }