Add a dedicated Next.js and TanStack installation snippets to the website tracking setup page

Merged
AN
1d ago
+113-48

Description

Adds dedicated Next.js and TanStack installation snippets to the website tracking setup page (/websites/[id]/settings/tracking).

Most modern React developers build with Next.js or TanStack Start / Router. Previously, the setup page only displayed a generic React layout snippet, which left ambiguity around Next.js App Router root layout conventions (app/layout.tsx), Server Components, environment variable naming (NEXT_PUBLIC_DATABUDDY_CLIENT_ID), and TanStack Router root routes (src/routes/__root.tsx).

Closes #1097

Slice

  • Issue: #1097
  • Scope / owning surface: dashboard
  • Dependencies or overlapping PRs: None

AI Disclosure

Assisted by opencode for review of code , writing unit tests and verifying types. The code was manually reviewed and validated locally.

Checklist
  • This branch started from current staging and does not include another unmerged PR unless it is named above.
  • This is one independently reviewable slice; unrelated cleanup or refactors are in separate PRs.
  • I checked open PRs for overlapping files, contracts, schemas, or deployment configuration and made any dependency explicit above.
  • This PR targets staging; after it closes, this branch will not be reused for another change.
  • My code follows the style guidelines of this project
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes

Visual Changes

Before

image

After

image

Summary by cubic

Adds a dedicated Next.js installation tab to the website tracking setup page, so React developers get framework-specific guidance instead of the generic React snippet.

  • Provides a root layout snippet for app/layout.tsx and supports keeping the Client ID out of code via the NEXT_PUBLIC_DATABUDDY_CLIENT_ID environment variable.
  • Refactors the prop builder so the React, Next.js, and Vue snippets share the same logic.