Skip to content

Instantly share code, notes, and snippets.

View nolimits4web's full-sized avatar

Vladimir Kharlampidi nolimits4web

View GitHub Profile
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
nolimits4web / index-with-theme.js
Last active March 5, 2021 16:33
page with theme detection
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
nolimits4web / _app.js
Created March 5, 2021 16:27
getInitialProps
function MyApp({ Component, pageProps, userAgent }) {
// pass userAgent to Framework7's App component
return (
<App
url={url}
routes={routes}
userAgent={userAgent}
>
{/* ... */}
</App>
// ...
// move our routes array out of component
const routes = [
{
path: '/',
asyncComponent: () => import('./index'),
},
// add dynamic Framework7 route to ./blog/[postID].js page
{
@nolimits4web
nolimits4web / [postID].js
Last active March 5, 2021 16:06
blog/[postID].js
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
nolimits4web / index.js
Created March 5, 2021 15:17
f7-next-index
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
nolimits4web / routes.js
Last active March 5, 2021 15:45
f7-next-routes
const routes = [
{
path: "/",
asyncComponent: () => import("./index"),
},
{
path: "/about",
asyncComponent: () => import("./about"),
},
{
@nolimits4web
nolimits4web / _app.js
Last active March 5, 2021 15:01
f7-next-app-2
// 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
nolimits4web / _app.js
Created March 5, 2021 14:46
f7-next-app-1
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
NEXT_PUBLIC_HOST=http://localhost:3000