feat: next.js example on Cloud Run

cloudrun-nextjs/.dockerignore

@@ -0,0 +1,12 @@
+# blacklist everything
+/*
+
+# whitelist
+#
+!/Dockerfile
+!/package.json
+!/package-lock.json
+!/next.config.js
+!/components/
+!/helpers/
+!/pages/

hosting-nextjs-ssg/.gitignore → cloudrun-nextjs/.gitignore

@@ -1,4 +1,3 @@
-
 # Created by https://www.gitignore.io/api/node,firebase
 # Edit at https://www.gitignore.io/?templates=node,firebase
 

cloudrun-nextjs/.tool-versions

@@ -0,0 +1,3 @@
+firebase 8.4.0
+nodejs 12.16.3
+gcloud 293.0.0

cloudrun-nextjs/Dockerfile

@@ -0,0 +1,14 @@
+# COPY Files
+FROM node:12-alpine AS build-env
+WORKDIR /app
+COPY . .
+RUN npm install && npm run build
+
+# Copy app and deps
+FROM node:12-alpine
+WORKDIR /app
+COPY --from=build-env /app .
+RUN rm -rf node_modules && npm install --only=production
+
+# Run Next.js
+CMD ["npm", "run", "start"]

cloudrun-nextjs/components/Footer.js

@@ -0,0 +1,53 @@
+function Footer() {
+	return (
+		<>
+			<footer>
+				Powered by
+				<a
+					href="https://firebase.google.com/products/hosting"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<img src="/firebase-hosting.svg" alt="Firebase Hosting Logo" />
+				</a>
+				&
+				<a
+					href="https://zeit.co?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<img src="/nextjs.svg" alt="Next.js Logo" className="nextjs" />
+				</a>
+			</footer>
+
+			<style jsx>{`
+				footer {
+					width: 100%;
+					height: 100px;
+					border-top: 1px solid #eaeaea;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+
+				footer img {
+					max-height: 72px;
+					margin-left: 0.5rem;
+				}
+
+				footer a {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+
+				footer img.nextjs {
+					margin-left: 1rem;
+					max-height: 48px;
+				}
+			`}</style>
+		</>
+	);
+}
+
+export default Footer;

cloudrun-nextjs/components/Header.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Link from 'next/link';
+
+export default function Header() {
+	return (
+		<header>
+			<Link href="/">
+				<a>Home</a>
+			</Link>{' '}
+			<Link href="/blog">
+				<a>Blog</a>
+			</Link>{' '}
+			<Link href="/about">
+				<a>About</a>
+			</Link>
+		</header>
+	);
+}

cloudrun-nextjs/firebase.json

@@ -0,0 +1,19 @@
+{
+	"firestore": {
+		"rules": "firestore.rules"
+	},
+	"hosting": {
+		"site": "TODO_YOUR_WEB_APP_DEPLOY_TARGET_HERE",
+		"public": "public",
+		"cleanUrls": true,
+		"rewrites": [
+			{
+				"source": "**",
+				"run": {
+					"serviceId": "nextjs-app",
+					"region": "us-central1"
+				}
+			}
+		]
+	}
+}

cloudrun-nextjs/helpers/utils.js

@@ -0,0 +1,13 @@
+function generatePosts(data) {
+	return data
+		? data.documents.map((post) => {
+				return {
+					pid: post.name.split('/').pop(),
+					title: post.fields.title.stringValue,
+					blurb: post.fields.blurb.stringValue,
+				};
+		  })
+		: [];
+}
+
+export { generatePosts };

cloudrun-nextjs/next.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	env: {
+		FIREBASE_PROJECT_ID: 'TODO_YOUR_PROJECT_ID_HERE',
+	},
+	experimental: {
+		sprFlushToDisk: false,
+	},
+};