nolimits4web

import { Page, Navbar, Block, theme } from "framework7-react";

export default function Home() {
  return (
    <Page>
      <Navbar title="Framework7 Next.js" />
      <Block>
        {theme.ios && <p>Hello to iOS user!</p>}
        {theme.md && <p>Hello to Android user!</p>}
      </Block>

nolimits4web

import { Page, Navbar, Block, theme } from "framework7-react";

export default function Home() {
  return (
    <Page>
      <Navbar title="Framework7 Next.js" />
      <Block>
        {theme.ios && <p>Hello to iOS user!</p>}
        {theme.md && <p>Hello to Android user!</p>}
      </Block>

nolimits4web

function MyApp({ Component, pageProps, userAgent }) {
  // pass userAgent to Framework7's App component 
  return (
    <App
      url={url}
      routes={routes}
      userAgent={userAgent}
    >
    {/* ... */}
    </App>

nolimits4web

// ...

// move our routes array out of component
const routes = [
  {
    path: '/',
    asyncComponent: () => import('./index'),
  },
  // add dynamic Framework7 route to ./blog/[postID].js page
  {

nolimits4web

import { Block, Navbar, Page } from "framework7-react";

export default function BlogPost(props) {
  /* 
   we use Framework7 router and its features
  */
  const { postID, f7route } = props;
  return (
    <Page>
      <Navbar title="Post" backLink="Back" />

nolimits4web

import { Page, Navbar, Block } from 'framework7-react';

export default function Home() {
  return (
    <Page>
      <Navbar title="Framework7 Next.js" />
      <Block>
        Hello world from Next.js
      </Block>
    </Page>

nolimits4web

const routes = [
  {
    path: "/",
    asyncComponent: () => import("./index"),
  },
  {
    path: "/about",
    asyncComponent: () => import("./about"),
  },
  {

nolimits4web

// 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";

nolimits4web

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

nolimits4web

NEXT_PUBLIC_HOST=http://localhost:3000