feat: add custom 404 page & conditionally render analytics script

hendraaagil · Dec 27, 2022 · 2d4882f · 2d4882f · vercel · Dec 27, 2022
1 parent f82da60
commit 2d4882f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -0,0 +1,12 @@
+import { Link, PageContainer, PageHeader } from '@/components'
+
+export default function NotFound() {
+  const title = '404'
+
+  return (
+    <PageContainer seoProps={{ title, noindex: true }}>
+      <PageHeader title="404 | Page not found!" />
+      <Link url="/">Back to Home</Link>
+    </PageContainer>
+  )
+}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,17 +1,21 @@
 import { Html, Head, Main, NextScript } from 'next/document'
+import Script from 'next/script'
 
 export default function Document() {
   return (
     <Html lang="en">
       <Head>
         <meta charSet="UTF-8" />
         <meta content="ie=edge" httpEquiv="X-UA-Compatible" />
-        <script
-          async
-          defer
-          data-website-id="d7044884-6f55-4a16-8344-9221c0e82832"
-          src="https://analytics.hendraaagil.dev/umami.js"
-        />
+        {process.env.NODE_ENV === 'production' && (
+          <Script
+            async
+            defer
+            strategy="afterInteractive"
+            data-website-id="d7044884-6f55-4a16-8344-9221c0e82832"
+            src="https://analytics.hendraaagil.dev/umami.js"
+          />
+        )}
       </Head>
       <body>
         <Main />