Cloud Functions for Firebase - NextJS example

CFF-next|.gitignore

# src/app/.gitignore
.next

CFF-next|components-App.js

// src/app/components/App.js
import Header from "./Header"

const App = ({ children }) =>
  <main>
    <Header />
    {children}
  </main>

export default App

CFF-next|components-Header.js

// src/app/components/Header.js
import Link from "next/link"

export default ({ pathname }) =>
  <header>
    <Link href="/">
      <a className={pathname === "/" && "is-active"}>Home</a>
    </Link>{" "}
    <Link href="/about">
      <a className={pathname === "/about" && "is-active"}>About</a>
    </Link>
  </header>

CFF-next|next.config.js

// src/app/next.config.js
module.exports = {
  distDir: "../functions/next"
}

CFF-next|pages-about.js

// src/app/pages/about.js
import App from "../components/App"

export default () =>
  <App>
    <p>About Page</p>
  </App>

CFF-next|pages-index.js

// src/app/pages/index.js
import App from "../components/App"

export default () =>
  <App>
    <p>Index Page</p>
  </App>