Amplify Up
LoginGet Started
Docs menu

Install

Add the Node SDK and wrap your app with a tracking ID.

This guide is for the Node SDK (@amplifyup/sdk).

  • init, page, track, and identify work from JavaScript or TypeScript without React.
  • Composed pages (AmplifyPageContent, Field, Slot) use the React entry (@amplifyup/sdk/react).
  • Runtime search and load more (queryContent) work from the React or server entry.
  • Static generation and middleware helpers are for Next.js (@amplifyup/sdk/server, @amplifyup/sdk/middleware).

Other platform SDKs are not available yet. This guide covers Node (JavaScript and TypeScript).

Starting a new Next.js app from the starter? Use create-amplifyup, then @amplifyup/cli in that project.

Install

npm install @amplifyup/sdk

Provider

Wrap the app once. The only required setting is trackingId.

// app/layout.tsx
import { AmplifyUpProvider } from '@amplifyup/sdk/react';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AmplifyUpProvider config={{ trackingId: 'trk_your_id' }}>{children}</AmplifyUpProvider>
      </body>
    </html>
  );
}

No extra URLs, site IDs, or preview flags. Production Edge and event endpoints are used by default.

You can also read the ID from env (NEXT_PUBLIC_AMPLIFYUP_TRACKING_ID) so each environment keeps its own site.

Confirm

  1. Copy the tracking ID from site settings.
  2. Load a page with AmplifyPageContent (next guide).
  3. Mark SDK installed on the site so Composer can preview.

Composer preview is automatic when the page loads inside Amplify Up (?preview=true). You do not configure a separate preview API on the site.