feat: conditionally enable Vercel analytics

Author: modori1208

README.md

@@ -43,7 +43,9 @@ loading across the platform.
   <tr>
     <td align="center"><b>deployment</b></td>
     <td>
-      <img src="https://img.shields.io/badge/Vercel-black?style=flat&logo=Vercel&logoColor=white" alt="Vercel" />      
+      <img src="https://img.shields.io/badge/Vercel-black?style=flat&logo=Vercel&logoColor=white" alt="Vercel" /> <i>(used until 2024)</i>
+      <br/>
+      <img src="https://img.shields.io/badge/Docker-2496ED?style=flat&logo=Docker&logoColor=white" alt="Docker" /> current self-hosted
     </td>
   </tr>
 </table>

next.config.mjs

@@ -6,6 +6,9 @@ const withVanillaExtract = createVanillaExtractPlugin();
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  env: {
+    NEXT_PUBLIC_VERCEL: process.env.VERCEL,
+  }
 };
 
 export default withVanillaExtract(withPlaiceholder(nextConfig));

src/app/providers.tsx

@@ -9,13 +9,19 @@ type ProvidersProps = {
   children: ReactNode;
 };
 
+const isVercel = process.env.NEXT_PUBLIC_VERCEL === '1';
+
 const Providers = ({ children }: ProvidersProps) => {
   useScreenSize();
 
   return (
     <>
-      <Analytics />
-      <SpeedInsights />
+      {isVercel && (
+        <>
+          <Analytics />
+          <SpeedInsights />
+        </>
+      )}
       {children}
     </>
   );