Merge pull request #416 from mwskwong/canary

Canary

next.config.mjs

@@ -135,7 +135,6 @@ const config = {
   experimental: {
     reactCompiler: false, // disabling for now since watch() from React Hook Form isn't returning the updated form value
     ppr: true,
-    after: true,
     webpackBuildWorker: true,
     optimizePackageImports: ['@mui/joy'],
   },

package.json

@@ -66,7 +66,7 @@
     "@next/eslint-plugin-next": "rc",
     "@svgr/webpack": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.4",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
     "@vercel/style-guide": "^6.0.0",

src/app/blog/[slug]/page.tsx

@@ -12,12 +12,12 @@ import {
 import { type Metadata } from 'next';
 import NextLink from 'next/link';
 import { notFound } from 'next/navigation';
-import { unstable_after as after } from 'next/server';
 import { type FC, Suspense } from 'react';
 import { type BlogPosting, type BreadcrumbList, type Graph } from 'schema-dts';
 
 import { BlogCoverImage } from '@/components/blog/blog-cover-image';
 import { CopyUrlButton } from '@/components/blog/copy-url-button';
+import { IncrBlogView } from '@/components/blog/incr-blog-view';
 import { ShareDropdown } from '@/components/blog/share-dropdown';
 import { Views, ViewsError, ViewsSkeleton } from '@/components/blog/views';
 import { Icon } from '@/components/contentful';
@@ -28,7 +28,6 @@ import { SectionDivider } from '@/components/section-divider';
 import { firstName, headline, lastName } from '@/constants/content';
 import { blog as blogNav, blogRssFeed, home } from '@/constants/nav';
 import { env } from '@/env.mjs';
-import { prisma } from '@/lib/clients';
 import { getPerson } from '@/lib/json-ld';
 import {
   getBlogBySlug,
@@ -45,18 +44,6 @@ interface BlogProps {
   params: { slug: string };
 }
 
-const IncrBlogView: FC<{ blogId: string }> = ({ blogId }) => {
-  after(
-    prisma.blogMetadata.upsert({
-      where: { id: blogId },
-      update: { view: { increment: 1 } },
-      create: { id: blogId },
-    }),
-  );
-
-  return null;
-};
-
 const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
   const [blog, personalPhoto, socialMediaProfiles, person] = await Promise.all([
     getBlogBySlug(slug),
@@ -68,11 +55,7 @@ const Blog: FC<BlogProps> = async ({ params: { slug } }) => {
 
   return (
     <>
-      <ErrorBoundary>
-        <Suspense>
-          <IncrBlogView blogId={blog.id} />
-        </Suspense>
-      </ErrorBoundary>
+      <IncrBlogView blogId={blog.id} />
       <main>
         <Container
           component="article"

src/app/providers.tsx

@@ -14,12 +14,14 @@ import { globalStyles, theme } from '@/theme';
 
 export type ProvidersProps = PropsWithChildren;
 export const Providers: FC<ProvidersProps> = ({ children }) => (
-  <AppRouterCacheProvider options={{ key: 'joy' }}>
-    <CssVarsProvider theme={theme}>
-      <CssBaseline />
-      <GlobalStyles styles={globalStyles} />
-      {getInitColorSchemeScript()}
-      {children}
-    </CssVarsProvider>
-  </AppRouterCacheProvider>
+  <>
+    {getInitColorSchemeScript()}
+    <AppRouterCacheProvider options={{ key: 'joy' }}>
+      <CssVarsProvider theme={theme}>
+        <CssBaseline />
+        <GlobalStyles styles={globalStyles} />
+        {children}
+      </CssVarsProvider>
+    </AppRouterCacheProvider>
+  </>
 );

src/components/blog/incr-blog-view.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { type FC, useEffect } from 'react';
+
+import { incrBlogViewById } from '@/lib/actions';
+
+export interface IncrBlogViewProps {
+  blogId: string;
+}
+
+export const IncrBlogView: FC<IncrBlogViewProps> = ({ blogId }) => {
+  useEffect(() => void incrBlogViewById(blogId), [blogId]);
+
+  return null;
+};

src/lib/actions.tsx

@@ -10,6 +10,13 @@ import { prisma, resend } from '@/lib/clients';
 
 import { type ContactForm, contactForm } from './validators';
 
+export const incrBlogViewById = async (id: string) =>
+  prisma.blogMetadata.upsert({
+    where: { id },
+    update: { view: { increment: 1 } },
+    create: { id },
+  });
+
 export const submitContactForm = async (data: ContactForm) => {
   contactForm.parse(data);
   await prisma.contactFormSubmission.create({ data });