# The Modern Stack: React and Next.js For modern web applications, we provide a dedicated NPM package. This library offers first-class support for TypeScript and integrates deeply with the React lifecycle to ensure absolute accuracy in tracking route changes and component interactions. #### Installation Add the Signet SDK to your project using your preferred package manager. ``` code Bash downloadcontent_copy expand_less npm install @signet/analytics # or yarn add @signet/analytics # or pnpm add @signet/analytics ``` #### Next.js App Router Integration The Next.js App Router introduces a new paradigm for layout management. Signet is designed to work within this architecture seamlessly. We recommend initializing the tracker in your root layout file to ensure it persists across all routes. **File: app/layout.tsx** ``` code Tsx downloadcontent_copy expand_less import { SignetProvider } from '@signet/analytics/react'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } ``` By placing the provider at the root, Signet automatically attaches to the Next.js router instance. It listens for navigation events and triggers page view updates without requiring a useEffect hook or manual route change listeners. #### Environment Management We strongly recommend using environment variables to manage your Site ID. This prevents your production credentials from leaking into your development environment and ensures you do not pollute your production data with localhost traffic. Create a .env.local file in your project root: ``` code Bash downloadcontent_copy expand_less NEXT_PUBLIC_SIGNET_ID=sgn_live_xxxxxxxxxxxxx ``` #### Development Hygiene To maintain the integrity of your data, you likely do not want to track visits during local development. The SignetProvider accepts a disabled prop or logic to handle this. A common pattern is to check the node environment. ``` code Tsx downloadcontent_copy expand_less const isProduction = process.env.NODE_ENV === 'production'; ``` When enabled is set to false, the SDK initializes in a dormant state. It will log intended actions to the console if debug mode is active but will never transmit data to the Signet ingestion endpoints. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.signtoken.vip/3.-implementation/the-modern-stack-react-and-next.js.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.