Install StepsKit (Next.js)
Use next/script to load StepsKit and identify the user in a single
spot. This guide assumes the App Router; the Pages Router pattern is the
same — just put the <Script> in _app.tsx.
Add Script to your root layout
Drop <Script> into app/layout.tsx. afterInteractive loads
StepsKit right after hydration, so it never blocks your first paint.
// app/layout.tsx
import Script from "next/script";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<Script
src="https://cdn.stepskit.com/stepskit.latest.js"
data-api-key="YOUR_API_KEY"
strategy="afterInteractive"
/>
</body>
</html>
);
}Identify the user
Call identify from your login handler — or anywhere you already have
the user object. This works for both new sign-ins and client-side
profile changes (plan upgrades, email updates, etc.):
"use client";
async function handleLogin(credentials) {
const user = await login(credentials);
window.stepskit?.identify({
id: user.id,
email: user.email,
plan: user.plan,
});
}You can also pass data-user-* attributes on the <Script> tag for
purely server-rendered cases — both patterns are supported, but
identify is preferred because it works for any flow.