client: improve error page design, fix isPageRequest regex in middleware

client/components/error/index.tsx

@@ -0,0 +1,19 @@
+import { Page } from '@geist-ui/core'
+
+const Error = ({ status }: {
+    status: number
+}) => {
+    return (
+        <Page title={status.toString() || 'Error'}>
+            {status === 404 ? (
+                <h1>This page cannot be found.</h1>
+            ) : (
+                <section>
+                    <p>An error occurred: {status}</p>
+                </section>
+            )}
+        </Page>
+    )
+}
+
+export default Error

client/pages/_error.tsx

@@ -0,0 +1,17 @@
+import ErrorComponent from '@components/error'
+
+function Error({ statusCode }: {
+    statusCode: number
+}) {
+    return <ErrorComponent status={statusCode} />
+}
+
+Error.getInitialProps = ({ res, err }: {
+    res: any
+    err: any
+}) => {
+    const statusCode = res ? res.statusCode : err ? err.statusCode : 404
+    return { statusCode }
+}
+
+export default Error

client/pages/_middleware.tsx

@@ -1,14 +1,14 @@
 import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
 
-const PUBLIC_FILE = /.(.*)$/
+const PUBLIC_FILE = /\.(.*)$/
 
 export function middleware(req: NextRequest, event: NextFetchEvent) {
     const pathname = req.nextUrl.pathname
     const signedIn = req.cookies['drift-token']
     const getURL = (pageName: string) => new URL(`/${pageName}`, req.url).href
     const isPageRequest =
-        !PUBLIC_FILE.test(req.nextUrl.pathname) &&
+        !PUBLIC_FILE.test(pathname) &&
-        !req.nextUrl.pathname.startsWith('/api') &&
+        !pathname.startsWith('/api') &&
         // header added when next/link pre-fetches a route
         !req.headers.get('x-middleware-preflight')