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

[ANSHSINGH050404]

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: feat(dashboard): add Next.js and TanStack installation snippets to tracking setup #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

After

---

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.

^{Written for commit cdfd19f. Summary will update on new commits.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Repository UI
• Review profile: ASSERTIVE
• Plan: Advanced
• Run ID: daf49797-45c0-48a8-93dc-5b8ea6d5ad8f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated
documentation	Skipped		Oct 17, 2026 5:49pm UTC

[vercel]

@ANSHSINGH050404 is attempting to deploy a commit to the Databuddy OSS Team on Vercel.

A member of the Team first needs to authorize it.

[ANSHSINGH050404]

@izadoesdev Happy to make any tweaks or adjustments based on your feedback!

[greptile-apps]

Confidence Score: 4/5

[Low impact] Adds code snippet examples to the tracking setup page.

The TanStack Start setup guidance still needs correction before merging.

Findings

1.  TanStack example breaks the page ▶

Summary

Adds dedicated Next.js and TanStack tracking setup tabs with copyable examples.

• Both examples include the selected tracking options and website ID.
• The Next.js panel explains the optional environment variable.
• The latest changes fix text wrapping and corners, and remove document elements from the TanStack example.

_{Reviews (2) · Last reviewed commit: "style(dashboard): refine TanStack snippe..." · Reviewed by Greptile}

[ANSHSINGH050404]

@greptile-apps check