Merge branch 'master' of github.com:zerodays/next-template into feat/…

…env-validation

.eslintrc.json

@@ -21,6 +21,7 @@
     }
   },
   "rules": {
+    "no-console": "error",
     "@typescript-eslint/no-unused-vars": "error",
     "@typescript-eslint/no-explicit-any": "error",
     "react/react-in-jsx-scope": "off",
@@ -31,6 +32,17 @@
         "./src/**/*.{js,ts}": "KEBAB_CASE"
       },
       { "ignoreMiddleExtensions": true }
+    ],
+    "@typescript-eslint/no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "next-axiom",
+            "message": "For client side logging import from log-client, for server actions and server components import from log-server"
+          }
+        ]
+      }
     ]
   }
 }

.prettierrc.js

@@ -31,5 +31,5 @@ module.exports = {
   ],
   importOrderParserPlugins: ['typescript', 'jsx', 'decorators-legacy'],
   importOrderTypeScriptVersion: '5.0.0',
-  plugins: [require('prettier-plugin-tailwindcss')],
+  plugins: ['prettier-plugin-tailwindcss'],
 };

next.config.mjs

@@ -1,5 +1,7 @@
 await import('./src/env.mjs');
 import { withSentryConfig } from '@sentry/nextjs';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { withAxiom } from 'next-axiom';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -22,8 +24,10 @@ const nextConfig = {
   },
 };
 
-export default withSentryConfig(nextConfig, {
-  silent: true,
-  org: 'zerodays',
-  project: 'next-template',
-});
+export default withAxiom(
+  withSentryConfig(nextConfig, {
+    silent: true,
+    org: 'zerodays',
+    project: 'next-template',
+  }),
+);

package.json

@@ -21,6 +21,7 @@
     "@t3-oss/env-nextjs": "^0.7.1",
     "autoprefixer": "10.4.14",
     "next": "^14.0.0",
+    "next-axiom": "^1.1.0",
     "next-international": "^1.1.3",
     "postcss": "8.4.31",
     "react": "^18.2.0",
@@ -52,8 +53,8 @@
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "ts-jest": "^29.1.1",
     "tsx": "^3.14.0"
   }

src/app/[locale]/page.tsx

@@ -1,10 +1,15 @@
 import { Inter } from 'next/font/google';
 
 import SampleForm from '@/components/sample-form';
+import serverLogger from '@/lib/axiom/log-server';
 
 const inter = Inter({ subsets: ['latin'] });
 
 export default function Page() {
+  const logger = serverLogger();
+
+  logger.info('Hello from server logger!');
+
   return (
     <main
       className={`flex h-screen flex-col items-center justify-center gap-8 text-center ${inter.className}`}>

src/components/sample-form.tsx

@@ -5,6 +5,7 @@ import { useForm } from 'react-hook-form';
 import { useScopedI18n } from '@/i18n/client';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
+import useClientLogger from '@/lib/axiom/log-client';
 
 // Always use zod to validate your form
 const SampleFormSchema = z
@@ -20,6 +21,7 @@ type SampleFormValues = z.infer<typeof SampleFormSchema>;
 // Example form using react-hook-form and zod
 const SampleForm = () => {
   const t = useScopedI18n('form');
+  const logger = useClientLogger();
 
   const [submitting, setSubmitting] = useState(false);
 
@@ -34,7 +36,7 @@ const SampleForm = () => {
 
   const onSubmit = (values: SampleFormValues) => {
     // Handle form submission
-    console.log(values);
+    logger.info('Form values:', values);
     setSubmitting(true);
   };
 

src/lib/axiom/log-client.tsx

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { useLogger } from 'next-axiom';
+
+// Used by client components to log events
+const useClientLogger = () => {
+  // TODO: add custom data to logs
+  const logConfig = { todo: 'TODO' };
+  return useLogger().with(logConfig);
+};
+
+export default useClientLogger;

src/lib/axiom/log-server.ts

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { Logger } from 'next-axiom';
+
+// Used by server actions + server components to log events
+const serverLogger = () => {
+  // TODO: add custom data to logs
+  const logConfig = { todo: 'TODO' };
+  return new Logger().with(logConfig);
+};
+
+export default serverLogger;

src/middleware.ts

@@ -14,5 +14,5 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)'],
+  matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt|_axiom).*)'],
 };