Merge branch 'canary' into font-defaults

docs/advanced-features/i18n-routing.md

@@ -224,7 +224,7 @@ Next.js doesn't know about variants of a page so it's up to you to add the `href
 
 ### Automatically Statically Optimized Pages
 
-For pages that are automatically statically optimized, a version of the page will be generated for each locale.
+For pages that are [automatically statically optimized](/docs/advanced-features/automatic-static-optimization.md), a version of the page will be generated for each locale.
 
 ### Non-dynamic getStaticProps Pages
 
@@ -270,4 +270,6 @@ export const getStaticPaths = ({ locales }) => {
 }
 ```
 
-Note: i18n routing does not currently support [`next export`](https://nextjs.org/docs/advanced-features/i18n-routing) mode as you are no longer leveraging Next.js' server-side routing.
+## Caveats
+
+Internationalized Routing does not currently support [Static HTML Export (`next export`)](/docs/advanced-features/static-html-export.md) as you are no longer leveraging Next.js' server-side routing in that case.

docs/advanced-features/static-html-export.md

@@ -71,4 +71,5 @@ By default, `next export` will generate an `out` directory, which can be served
 - The [`fallback: true`](/docs/basic-features/data-fetching.md#fallback-true) mode of `getStaticPaths` is not supported when using `next export`.
 - [API Routes](/docs/api-routes/introduction.md) are not supported by this method because they can't be prerendered to HTML.
 - [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) cannot be used within pages because the method requires a server. Consider using [`getStaticProps`](/docs/basic-features/data-fetching.md#getstaticprops-static-generation) instead.
+- [Internationalized Routing](/docs/advanced-features/i18n-routing.md) is not supported as it requires Next.js' server-side routing.
 - The [`next/image`](/docs/api-reference/next/image) component's default loader is not supported when using `next export`. However, other [loader](https://nextjs.org/docs/basic-features/image-optimization#loader) options will work.

examples/with-firebase/.env.local.example

@@ -5,4 +5,8 @@ NEXT_PUBLIC_FIREBASE_DATABASE_URL=
 NEXT_PUBLIC_FIREBASE_PROJECT_ID=
 NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
 NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
-NEXT_PUBLIC_FIREBASE_APP_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=
+
+# for firebase-admin
+FIREBASE_CLIENT_EMAIL=
+FIREBASE_PRIVATE_KEY=

examples/with-firebase/README.md

@@ -33,6 +33,8 @@ cp .env.local.example .env.local
 
 3. Set each variable on `.env.local` with your Firebase Configuration (found in "Project settings").
 
+4. If you want to check the SSR page, get your account credentials from the Firebase console at _Project settings > Service accounts_, where you can click on _Generate new private key_ and download the credentials as a json file. Then set `FIREBASE_CLIENT_EMAIL` and `FIREBASE_PRIVATE_KEY` in `.env.local`
+
 ## Deploy on Vercel
 
 You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-firebase/fetchData/getProfileData.js

@@ -0,0 +1,13 @@
+import admin from '../firebase/nodeApp'
+
+export const getProfileData = async (username) => {
+  const db = admin.firestore()
+  const profileCollection = db.collection('profile')
+  const profileDoc = await profileCollection.doc(username).get()
+
+  if (!profileDoc.exists) {
+    return null
+  }
+
+  return profileDoc.data()
+}

examples/with-firebase/firebase/clientApp.js

@@ -18,7 +18,10 @@ const clientCredentials = {
 if (typeof window !== 'undefined' && !firebase.apps.length) {
   firebase.initializeApp(clientCredentials)
   // To enable analytics. https://firebase.google.com/docs/analytics/get-started
-  if ('measurementId' in clientCredentials) firebase.analytics()
+  if ('measurementId' in clientCredentials) {
+    firebase.analytics()
+    firebase.performance()
+  }
 }
 
 export default firebase

examples/with-firebase/firebase/nodeApp.js

@@ -0,0 +1,14 @@
+import * as admin from 'firebase-admin'
+
+if (!admin.apps.length) {
+  admin.initializeApp({
+    credential: admin.credential.cert({
+      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
+      privateKey: process.env.FIREBASE_PRIVATE_KEY.replace(/\\n/g, '\n'),
+    }),
+    databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
+  })
+}
+
+export default admin

examples/with-firebase/package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "firebase": "7.17.0",
+    "firebase-admin": "9.0.0",
     "next": "latest",
     "react": "^16.13.0",
     "react-dom": "^16.13.0"

examples/with-firebase/pages/index.js

@@ -1,4 +1,5 @@
 import Head from 'next/head'
+import Link from 'next/link'
 import { useEffect } from 'react'
 import { useUser } from '../context/userContext'
 import firebase from '../firebase/clientApp'
@@ -7,6 +8,8 @@ export default function Home() {
   // Our custom hook to get context values
   const { loadingUser, user } = useUser()
 
+  const profile = { username: 'nextjs_user', message: 'Awesome!!' }
+
   useEffect(() => {
     if (!loadingUser) {
       // You know that the user is loaded: either logged in or out!
@@ -16,6 +19,12 @@ export default function Home() {
     console.log(firebase)
   }, [loadingUser, user])
 
+  const createUser = async () => {
+    const db = firebase.firestore()
+    await db.collection('profile').doc(profile.username).set(profile)
+    alert('User created!!')
+  }
+
   return (
     <div className="container">
       <Head>
@@ -26,6 +35,19 @@ export default function Home() {
       <main>
         <h1 className="title">Next.js w/ Firebase Client-Side</h1>
         <p className="description">Fill in your credentials to get started</p>
+
+        <p className="description">
+          Cloud Firestore Security Rules write permissions are required for
+          adding users
+        </p>
+        <button onClick={createUser}>Create 'nextjs_user'</button>
+
+        <p className="description">
+          Please press the link below after adding the user
+        </p>
+        <Link href={`/profile/${profile.username}`} passHref>
+          <a>Go to SSR Page</a>
+        </Link>
       </main>
 
       <style jsx>{`
@@ -66,9 +88,14 @@ export default function Home() {
           align-items: center;
         }
 
+        button {
+          font-size: 1.5em;
+          margin: 1em 0;
+        }
+
         a {
-          color: inherit;
-          text-decoration: none;
+          color: blue;
+          font-size: 1.5em;
         }
 
         .title a {

examples/with-firebase/pages/profile/[username].js

@@ -0,0 +1,31 @@
+import Head from 'next/head'
+
+import { getProfileData } from '../../fetchData/getProfileData'
+
+export default function SSRPage({ data }) {
+  const { username, profile } = data
+
+  return (
+    <div className="container">
+      <Head>
+        <title>Next.js w/ Firebase Client-Side</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main>
+        <h1 className="title">Next.js w/ Firebase Server-Side</h1>
+        <h2>{username}</h2>
+        <p>{profile.message}</p>
+      </main>
+    </div>
+  )
+}
+
+export const getServerSideProps = async ({ params }) => {
+  const { username } = params
+  const profile = await getProfileData(username)
+  if (!profile) {
+    return { notFound: true }
+  }
+  return { props: { data: { username, profile } } }
+}

examples/with-neo4j/.env.local.example

@@ -0,0 +1,4 @@
+// Environment variables required to connect the app with your Neo4j database
+NEO4J_URI=
+NEO4J_USER=
+NEO4J_PASSWORD=

examples/with-neo4j/.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

examples/with-neo4j/README.md

@@ -0,0 +1,61 @@
+# Neo4j Example
+
+This is a simple set up for Next using Neo4j Database with api routes. Neo4j's Movies dataset example is used to run the example.
+
+## Deploy your own
+
+Once you have access to [the environment variables you'll need](#step-3-set-up-environment-variables), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-neo4j&env=NEO4J_URI,NEO4J_USER,NEO4J_PASSWORD&envDescription=Required%20to%20connect%20the%20app%20with%20a%20Neo4j%20database&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-neo4j%23step-3-set-up-environment-variables)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-neo4j with-neo4j-app
+# or
+yarn create next-app --example with-neo4j with-neo4j-app
+```
+
+## Configuration
+
+### Step 1. Create a Neo4j database
+
+First, you'll need a Neo4j database. [Neo4j Desktop](https://neo4j.com/download/) and [Neo4j Online Sandbox](https://neo4j.com/sandbox/) are good and free to use options.
+
+### Step 2. Add the movie graph model to the database
+
+This example uses a database containing _Movies_, you can add it like so:
+
+```bash
+:play movie-graph
+```
+
+Also included is a Cypher [movie sample](./movie-sample.md) query if needed.
+
+### Step 3. Set up environment variables
+
+Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
+
+```bash
+cp .env.local.example .env.local
+```
+
+Then set each variable on `.env.local` to match your database uri and credentials.
+
+## Deploy on Vercel
+
+You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+### Deploy Your Local Project
+
+To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example).
+
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+
+### Deploy from Our Template
+
+Alternatively, you can deploy using our template by clicking on the Deploy button below.
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-neo4j&env=NEO4J_URI,NEO4J_USER,NEO4J_PASSWORD&envDescription=Required%20to%20connect%20the%20app%20with%20a%20Neo4j%20database&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-neo4j%23step-3-set-up-environment-variables)

examples/with-neo4j/components/footer.js

@@ -0,0 +1,37 @@
+export default function Footer() {
+  return (
+    <footer>
+      <a
+        href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Powered by <img src="/vercel.svg" alt="Vercel Logo" className="logo" />
+      </a>
+
+      <style jsx>
+        {`
+          footer {
+            width: 100%;
+            height: 100px;
+            border-top: 1px solid #eaeaea;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          footer img {
+            margin-left: 0.5rem;
+          }
+          footer a {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+          .logo {
+            height: 1em;
+          }
+        `}
+      </style>
+    </footer>
+  )
+}

examples/with-neo4j/components/header.js

@@ -0,0 +1,35 @@
+export default function Header({ title }) {
+  return (
+    <header>
+      <h1 className="title">
+        {title ? (
+          <span>{title}</span>
+        ) : (
+          <span>
+            Welcome to <a href="https://nextjs.org">Next.js with Neo4j!</a>
+          </span>
+        )}
+      </h1>
+
+      <style jsx>{`
+        .title a {
+          color: #0070f3;
+          text-decoration: none;
+        }
+        .title a:hover,
+        .title a:focus,
+        .title a:active {
+          text-decoration: underline;
+        }
+        .title {
+          font-size: 3rem;
+          margin-bottom: 25px;
+        }
+        .title,
+        .description {
+          text-align: center;
+        }
+      `}</style>
+    </header>
+  )
+}

examples/with-neo4j/lib/fetcher.js

@@ -0,0 +1,4 @@
+export default async function fetcher(...args) {
+  const res = await fetch(...args)
+  return res.json()
+}