> ## Documentation Index
> Fetch the complete documentation index at: https://help.trfyx.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Proxy Trfyx through Next.js

> Proxy Trfyx analytics through Next.js rewrites so requests stay on your domain.

Use Next.js rewrites to route the Trfyx script and event endpoint through your own domain.

<Steps>
  <Step title="Add rewrites">
    In `next.config.js`:

    ```js next.config.js theme={"dark"}
    /** @type {import('next').NextConfig} */
    const nextConfig = {
      async rewrites() {
        return [
          {
            source: "/script.js",
            destination: "https://app.trfyx.com/script.js",
          },
          {
            source: "/api/events",
            destination: "https://app.trfyx.com/api/events",
          },
        ];
      },
    };

    module.exports = nextConfig;
    ```

    If your app already uses `/api/events`, choose another path such as `/trfyx-events` and set `data-api-url` to that path.
  </Step>

  <Step title="Update the tracker">
    ```tsx pages/_app.tsx theme={"dark"}
    import Script from "next/script";

    <Script
      strategy="afterInteractive"
      data-website-id="YOUR_TRFYX_PROJECT_ID"
      data-domain="yourdomain.com"
      src="/script.js"
    />
    ```

    When `src` is same-origin, Trfyx sends events to `/api/events` by default.
  </Step>

  <Step title="Verify installation">
    Deploy your application, open the browser **Network** panel, and confirm both `script.js` and `/api/events` are requested from your domain. Then check that the activity appears in Trfyx.

    <Warning>
      Make sure your hosting layer preserves the original client IP. If all visitors appear from your server location, review your forwarding headers or use <a href="/managed-proxy">Managed Proxy</a>.
    </Warning>
  </Step>
</Steps>

## Next steps

<CardGroup cols={2}>
  <Card title="Goals" icon="bullseye" href="/goals" />

  <Card title="Funnels" icon="filter" href="/funnels" />

  <Card title="Managed Proxy" icon="shield-halved" href="/managed-proxy" />

  <Card title="Troubleshooting" icon="life-ring" href="/troubleshooting" />
</CardGroup>


## Related topics

- [Install Trfyx in Next.js](/nextjs-app-router.md)
- [Proxy Trfyx through your domain](/proxy-guide.md)
- [Proxy Trfyx through Vue.js](/vuejs-proxy.md)
- [Proxy Trfyx through Nginx](/nginx-proxy.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.