feat: add @simpleanalytics/next for middleware pageview tracking

app/Analytics.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { SimpleAnalytics } from '@simpleanalytics/next';
 import { usePathname } from 'lib/i18n/navigation';
 import analytics from 'lib/utils/analytics';
-import Script from 'next/script';
 import { useEffect } from 'react';
 
 const Analytics = () => {
@@ -20,12 +20,13 @@ const Analytics = () => {
   // SimpleAnalytics
   return (
     <>
-      <Script>
+      {/* <Script>
         {
           'window.sa_event=window.sa_event||function(){var a=[].slice.call(arguments);window.sa_event.q?window.sa_event.q.push(a):window.sa_event.q=[a]};'
         }
-      </Script>
-      <Script async defer src="/assets/js/sa-v11.js" />
+      </Script> */}
+      {/* <Script async defer src="/assets/js/sa-v11.js" /> */}
+      <SimpleAnalytics autoCollect={false} />
     </>
   );
 };

components/common/select/SearchableSelect.tsx

@@ -18,7 +18,7 @@ import Select, { type Props as SelectProps } from 'components/common/select/Sele
 import Button from '../Button';
 import Chevron from '../Chevron';
 
-import type { FilterOptionOption } from 'react-select/dist/declarations/src/filters';
+import type { FilterOptionOption } from 'node_modules/react-select/dist/declarations/src/filters';
 import { twMerge } from 'tailwind-merge';
 
 interface Props<O, I extends boolean, G extends GroupBase<O>> extends SelectProps<O, I, G> {

lib/utils/eip5792.ts

@@ -1,6 +1,6 @@
 import type { TransactionSubmitted } from 'lib/interfaces';
+import type { Call } from 'node_modules/viem/_types/types/calls';
 import type { SendTransactionParameters, WalletCallReceipt, WalletClient, WriteContractParameters } from 'viem';
-import type { Call } from 'viem/_types/types/calls';
 import { type Eip5792Actions, type GetCallsStatusReturnType, eip5792Actions } from 'viem/experimental';
 import type { OnUpdate } from './allowances';
 import type { TokenAllowanceData } from './allowances';

middleware.ts

@@ -1,7 +1,18 @@
+import { trackPageview } from '@simpleanalytics/next/server';
 import { defaultLocale, localePrefix, locales } from 'lib/i18n/config';
 import createMiddleware from 'next-intl/middleware';
+import type { NextFetchEvent, NextRequest } from 'next/server';
 
-export default createMiddleware({ locales, localePrefix, defaultLocale });
+const handleI18n = createMiddleware({ locales, localePrefix, defaultLocale });
+const handleAnalytics = (request: NextRequest, event: NextFetchEvent) => {
+  event.waitUntil(trackPageview({ request }));
+};
+
+export default async function middleware(request: NextRequest, event: NextFetchEvent) {
+  console.log('request', request);
+  handleAnalytics(request, event);
+  return handleI18n(request);
+}
 
 export const config = {
   // Allow all paths starting with /address and apply exclusions to other paths

next.config.js

@@ -1,6 +1,7 @@
 const withBundleAnalyzer = require('next-bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' });
 const withNextIntl = require('next-intl/plugin')();
 const withNextCircularDeps = require('next-circular-dependency');
+const withSimpleAnalytics = require('@simpleanalytics/next/plugin');
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -52,6 +53,7 @@ const nextConfig = {
 module.exports = nextConfig;
 module.exports = withNextIntl(module.exports);
 module.exports = withBundleAnalyzer(module.exports);
+module.exports = withSimpleAnalytics(module.exports);
 
 if (process.env.CHECK_CIRCULAR_DEPS) {
   module.exports = withNextCircularDeps(module.exports);

package.json

@@ -31,6 +31,7 @@
     "@neondatabase/serverless": "^0.10.1",
     "@privy-io/cross-app-connect": "^0.1.2",
     "@revoke.cash/chains": "^63.0.0",
+    "@simpleanalytics/next": "https://pkg.pr.new/JeanMeijer/simpleanalytics-next/@simpleanalytics/next@9f661fc",
     "@tanstack/query-sync-storage-persister": "^5.52.0",
     "@tanstack/react-query": "^5.52.0",
     "@tanstack/react-query-persist-client": "^5.52.0",

tsconfig.json

@@ -10,7 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "downlevelIteration": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

yarn.lock

@@ -2377,6 +2377,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@simpleanalytics/next@https://pkg.pr.new/JeanMeijer/simpleanalytics-next/@simpleanalytics/next@9f661fc":
+  version: 0.0.1
+  resolution: "@simpleanalytics/next@https://pkg.pr.new/JeanMeijer/simpleanalytics-next/@simpleanalytics/next@9f661fc"
+  dependencies:
+    server-only: "npm:^0.0.1"
+  peerDependencies:
+    next: ">= 13"
+    react: ^18 || ^19
+  peerDependenciesMeta:
+    next:
+      optional: true
+    react:
+      optional: true
+  checksum: 10/cd03046a27b31e28ad33df58017289e24415d494f627193dfab997368bcbf323166cf429ff10a9e0f1fa81b240cecff499d8684ef392f0208e3f509895ebe0e3
+  languageName: node
+  linkType: hard
+
 "@sinonjs/text-encoding@npm:0.7.2":
   version: 0.7.2
   resolution: "@sinonjs/text-encoding@npm:0.7.2"
@@ -10221,6 +10238,7 @@ __metadata:
     "@privy-io/cross-app-connect": "npm:^0.1.2"
     "@rainbow-me/rainbowkit": "npm:^2.2.1"
     "@revoke.cash/chains": "npm:^63.0.0"
+    "@simpleanalytics/next": "https://pkg.pr.new/JeanMeijer/simpleanalytics-next/@simpleanalytics/next@9f661fc"
     "@tailwindcss/typography": "npm:^0.5.14"
     "@tanstack/query-sync-storage-persister": "npm:^5.52.0"
     "@tanstack/react-query": "npm:^5.52.0"
@@ -10413,6 +10431,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"server-only@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "server-only@npm:0.0.1"
+  checksum: 10/c432348956641ea3f460af8dc3765f3a1bdbcf7a1e0205b0756d868e6e6fe8934cdee6bff68401a1dd49ba4a831c75916517a877446d54b334f7de36fa273e53
+  languageName: node
+  linkType: hard
+
 "set-blocking@npm:^2.0.0":
   version: 2.0.0
   resolution: "set-blocking@npm:2.0.0"