Update Next and Vercel (#108)

Author: tothmano

apps/vercel.mdx

@@ -22,7 +22,7 @@ Vercel provides a frictionless developer experience to take care of the hard thi
 
 Vercel makes it easy for frontend teams to develop, preview, and ship delightful user experiences, where performance is the default.
 
-## Sending logs to Axiom
+## Send logs to Axiom
 
 Simply install the [Axiom Vercel app from here](https://vercel.com/integrations/axiom) and be streaming logs and web vitals within minutes!
 
@@ -40,9 +40,11 @@ For function logs, if you call `console.log`, `console.warn` or `console.error`
 
 Axiom supports capturing and analyzing Web Vital data directly from your user’s browser without any sampling and with more data than is available elsewhere. It is perfect to pair with Vercel’s in-built analytics when you want to get really deep into a specific problem or debug issues with a specific audience (user-agent, location, region, etc).
 
-**NOTE: Web Vitals are only currently supported for Next.js websites. Expanded support is coming soon!**
+<Note>
+Web Vitals are only currently supported for Next.js websites. Expanded support is coming soon.
+</Note>
 
-#### Installation
+### Installation
 
 Perform the following steps to install Web Vitals:
 
@@ -74,7 +76,9 @@ export default function RootLayout() {
 }
 ```
 
-**Note:** WebVitals are sent only from production deployments.
+<Note>
+WebVitals are sent only from production deployments.
+</Note>
 
 4. Deploy your site and watch data coming into your Axiom dashboard.
 
@@ -135,7 +139,7 @@ export const GET = withAxiom((req: AxiomRequest) => {
 });
 ```
 
-## Using Next.js 12 for Web Vitals
+## Use Next.js 12 for Web Vitals
 
 If you’re using Next.js version 12, follow the instructions below to integrate Axiom for logging and capturing Web Vitals data.
 
@@ -145,7 +149,7 @@ In your `pages/_app.js` or `pages/_app.ts` and add the following line:
 export { reportWebVitals } from 'next-axiom';
 ```
 
-## Upgrading to Next.js 13 from Next.js 12
+## Upgrade to Next.js 13 from Next.js 12
 
 If you plan on upgrading to Next.js 13, you'll need to make specific changes to ensure compatibility:
 
@@ -235,7 +239,6 @@ You can **parse** the JSON using the [parse_json function](/apl/scalar-functions
 
 - Check out our [APL Documentation on how to use more functions](/apl/scalar-functions/string-functions) and run your own queries against your Vercel logs.
 
-
 ## Migrate from Vercel app to next-axiom
 
 In May 2024, Vercel [introduced higher costs](https://axiom.co/blog/changes-to-vercel-log-drains) for using Vercel Log Drains. Because the Axiom Vercel app depends on Log Drains, using the next-axiom library can be the cheaper option to analyze telemetry data for higher volume projects.
@@ -260,3 +263,7 @@ module.exports = withAxiom({
 ```
 
 For more configuration options, see the [documentation in the next-axiom GitHub repository](https://github.com/axiomhq/next-axiom).
+
+## Send logs from Vercel preview deployments
+
+To send logs from Vercel preview deployments to Axiom, enable preview deployments for the environment variable `NEXT_PUBLIC_AXIOM_INGEST_ENDPOINT`. For more information, see the [Vercel documentation](https://vercel.com/docs/projects/environment-variables/managing-environment-variables).

send-data/nextjs.mdx

@@ -224,3 +224,11 @@ export default function ErrorPage({
 }
 ```
 
+## Extend logger
+
+To extend the logger, use `log.with` to create an intermediate logger. For example:
+
+```typescript
+const logger = userLogger().with({ userId: 42 });
+logger.info('Hi'); // will ingest { ..., "message": "Hi", "fields" { "userId": 42 }}
+```