feat: nextjs pwa

.github/workflows/vercel-preview.yml

@@ -6,7 +6,7 @@ on:
  workflow_dispatch:
  push:
  branches:
- - feat-custom-domain
+ - feat-pwa
 
 jobs:
  deploy:

.gitignore

@@ -41,3 +41,7 @@ test-results/
 
 # Sentry Auth Token
 .sentryclirc
+
+# PWA
+public/sw.js*
+public/workbox-*.js*

components/PageHead.js

@@ -24,6 +24,8 @@ export default function PageHead(props) {
  <meta property="og:type" content={ogType} />
  <meta property="og:url" content={ogUrl} />
  <meta property="og:image" content={ogImage} />
+ <link rel="manifest" href="/manifest.json" />
+
  {children}
  </Head>
  );

next.config.mjs

@@ -2,6 +2,10 @@ import { withSentryConfig } from "@sentry/nextjs";
 import remarkGfm from "remark-gfm";
 import remarkPrism from "remark-prism";
 import createMDX from "@next/mdx";
+import withPWA from "next-pwa";
+import runtimeCaching from "next-pwa/cache.js";
+
+const isProduction = process.env.NODE_ENV === "production";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -49,37 +53,43 @@ const withMDX = createMDX({
  },
 });
 
-export default withSentryConfig(
- withMDX(nextConfig),
- {
-  // For all available options, see:
- // https:/getsentry/sentry-webpack-plugin#options
+export default withPWA({
+ dest: "public",
+ disable: !isProduction,
+ runtimeCaching,
+})(withSentryConfig(
 
- // Suppresses source map uploading logs during build
- silent: true,
- org: process.env.SENTRY_ORG,
- project: process.env.SENTRY_PROJECT,
- },
- {
- // For all available options, see:
- // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+ withMDX(nextConfig),
+ {
+ // For all available options, see:
+ // https:/getsentry/sentry-webpack-plugin#options
 
- // Upload a larger set of source maps for prettier stack traces (increases build time)
- widenClientFileUpload: true,
+ // Suppresses source map uploading logs during build
+ silent: true,
+ org: process.env.SENTRY_ORG,
+ project: process.env.SENTRY_PROJECT,
+ },
+ {
+ // For all available options, see:
+ // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
 
- // Transpiles SDK to be compatible with IE11 (increases bundle size)
- transpileClientSDK: true,
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
 
- // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
- tunnelRoute: "/monitoring",
+  // Transpiles SDK to be compatible with IE11 (increases bundle size)
+  transpileClientSDK: true,
 
- // Hides source maps from generated client bundles
- hideSourceMaps: true,
+  // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+  tunnelRoute: "/monitoring",
 
- // Automatically tree-shake Sentry logger statements to reduce bundle size
- disableLogger: true,
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
 
- // custom
- automaticVercelMonitors: false,
- },
+ // Automatically tree-shake Sentry logger statements to reduce bundle size
+ disableLogger: true,
+
+ // custom
+ automaticVercelMonitors: false,
+ },
+ ),
 );