rsnext/examples/with-segment-analytics
Luke Bussey 1aab5ee915
(Example) Update with-segment-analytics to use segmentio/analytics-next and app layout (#52327)
The
[with-segment-analytics](https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics)
example is out of date so this PR updates it to use
[segmentio/analytics-next](https://github.com/segmentio/analytics-next)
with TypeScript and the app layout.

---------

Co-authored-by: Lee Robinson <me@leerob.io>
2023-08-30 13:04:38 -05:00
..
app (Example) Update with-segment-analytics to use segmentio/analytics-next and app layout (#52327) 2023-08-30 13:04:38 -05:00
components (Example) Update with-segment-analytics to use segmentio/analytics-next and app layout (#52327) 2023-08-30 13:04:38 -05:00
lib (Example) Update with-segment-analytics to use segmentio/analytics-next and app layout (#52327) 2023-08-30 13:04:38 -05:00
.env.local.example (Example) Update with-segment-analytics to use segmentio/analytics-next and app layout (#52327) 2023-08-30 13:04:38 -05:00
.gitignore Remove incorrect entries for pnpm debug log (#47241) 2023-03-26 22:26:05 -07:00
package.json (Example) Update with-segment-analytics to use segmentio/analytics-next and app layout (#52327) 2023-08-30 13:04:38 -05:00
README.md (Example) Update with-segment-analytics to use segmentio/analytics-next and app layout (#52327) 2023-08-30 13:04:38 -05:00
tsconfig.json (Example) Update with-segment-analytics to use segmentio/analytics-next and app layout (#52327) 2023-08-30 13:04:38 -05:00

With Segment Analytics

This example shows how to use Next.js along with Segment Analytics using segmentio/analytics-next. The main app layout includes a client component (analytics.tsx)[(https://github.com/vercel/next.js/blob/canary/examples/with-segment-analytics/components/analytics.tsx)] which loads Segment and also exports the analytics object which can be imported and used to call the Track API on user actions (Refer to contact.tsx).

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

Deploy with Vercel

How to use

Execute create-next-app with npm, Yarn, or pnpm to bootstrap the example:

npx create-next-app --example with-segment-analytics with-segment-analytics-app
yarn create next-app --example with-segment-analytics with-segment-analytics-app
pnpm create next-app --example with-segment-analytics with-segment-analytics-app

Deploy it to the cloud with Vercel (Documentation).